Vue自定义InputNumber 计数器组件

ElementUI中关于技术器组件（InputNumber)在设置大小时具有一定的局限性，因为需要用两个button和input对上述计数器进行重构，并封装成组件，供今后使用。

一.代码实现

1.封装

将其封装为局部组件，文件放在src/libs目录下,新建InputNumber.vue组件。
代码如下（示例）：

<template>
  <div class="xtx-number">
    <div class="label"><slot /></div>
    <div class="numbox">
      <button @click="handleSub(-1)">-</button>
      <input type="text" readonly :value="counter_num" />
      <!-- readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应 -->
      <button @click="handleSub(1)">+</button>
    </div>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    min: {
      type: Number,
      default: 1, //最小值
    },
    max: {
      type: Number,
      default: Infinity, //最大值
    },
    value: {
      type: Number,
      default: 1, //计数
    },
  },
  setup(props, { emit }) {
    const counter_num = ref(props.value);
    const handleSub = (n) => {
      if (n < 0) {
        if (counter_num.value <= props.min) {
          counter_num.value = props.min;
        } else {
          counter_num.value -= 1;
        }
      } else {
        if (counter_num.value >= props.max) {
          counter_num.value = props.max;
        } else {
          counter_num.value += 1;
        }
      }
      emit("input", counter_num.value);
    };
    return { handleSub, counter_num };
  },
};
</script>



<style lang="scss">
.xtx-number {
  display: flex;
  align-items: center;
  .label {
    width: 60px;
    padding-left: 10px;
    color: #999;
  }
  .numbox {
    display: flex;
    width: 120px;
    height: 40px;
    border: 1px solid #e4e4e4;
    button {
      display: inline-block;
      width: 29px;
      line-height: 28px;
      text-align: center;
      background: #f8f8f8;
      font-size: 16px;
      color: #666;
      border: none;
      &:focus {
        outline: none;
      }
      &:first-of-type {
        border-right: 1px solid #e4e4e4;
      }
      &:last-of-type {
        border-left: 1px solid #e4e4e4;
      }
    }
    input {
      width: 60px;
      padding: 0 5px;
      text-align: center;
      color: #ccc;
      border: none;
      &:focus {
        outline: none;
      }
    }
  }
}
</style>

使用时，min_val用于设定最小值、max_val用于设定最大值（Infinity表示无穷大）、val设定初始值。

二. 使用

在任意.vue结尾的文件中引入InputNumber.vue就可以使用。
如果有默认数据的话，将默认数据传递给子组件。
代码如下（示例）：

<template>
  <h1>InputNumber组件示例</h1>
  <div class="demo">
    <h2>常规使用</h2>
    <div class="demo__component">
      <h3>
        pageNo:当前页码，total:数据总条数，continues：连续的页码数，getPageNo：获得当前点击的页码
      </h3>
      <InputNumbers
        :min="min_val"
        :max="max_val"
        :value="val"
        @input="val = $event"  //其这两行可以简写成v-model='val'
        >数量
      </InputNumbers>
    </div>
    <div class="demo__actions">
      <Button>隐藏代码</Button>
    </div>
    <div v-if="false" class="demo__code">
      <pre>代码</pre>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import Button from "../libs/Button.vue";
import InputNumbers from "../libs/InputNumbers.vue";
export default {
  components: {
    Button,
    InputNumbers,
  },
  setup() {
    const min_val = ref(1); //设定为最小的值
    const max_val = ref(Infinity); //设定最大值，infinity为无穷大
    const val = ref(1); //计算器的初始值
    return {
      val,
      max_val,
      min_val,
    };
  },
};
</script>
<style lang="scss">
</style>

效果图如下显示：