vue组件：input数字输入框-程序员宅基地

组件效果图如下：

在vue-cli脚手架上搭建的，用来输入数字，两个按钮用来加减步长。可以设置初始值、最大最小值。

开始代码：

父组件---App.vue

<input-component v-model.number='value'
                 :maxNum='maxNum' 
                 :minNum='minNum'
                 :step='step'
></input-component> 

<input-component>该标签是要引用的子组件自定义标签，value为默认输入值，maxNum为最大值，minNum为最小值，step为步长，即点击加/减按钮要增加/减少的数。

js:

data() {
    return {
      maxNum: 100,
      minNum: 0,
      value: 3,
      step: 2
    }
}

子组件---input.vue

<input :value="currentVal">
<input type="button" value="+" @click="buttonClick(1)">
<input type="button" value="-" @click="buttonClick(-1)">
<p>默认值：{
    {value}}</p>
<p>当前值：{
    {currentVal}}</p>
<p>最大值：{
    {maxNum}}</p>
<p>步长：{
    {step}}</p>

export default {
        data() {
            return {
                currentVal: this.value
            }
        },
        props: {
            value: {
                type: Number,
                default: 10
            },
            maxNum: {
                type: Number,
                default: Infinity
            },
            minNum: {
                type: Number,
                default: -Infinity
            },
            step: {
                type: Number,
                default: 1
            }
        }
    }

vue组件是单向数据流，所以无法从组件内部直接修改prop value的值。可以给组件声明一个data，默认引用value的值，在组件内部维护data，这里声明的data值为currentVal。上面代码第四行。

以上，解决了初始化引用父组件value的值，如果子组件修改了currentVal，那么父组件里value也要一起更新，使用watch监听

在子组件中添加

export default {
    ... //此处省略了代码
     watch: {
            currentVal(val){
                console.log('子组件currentVal值改变')
                this.$emit('input', val)
            }
     }
}

 子组件里按钮点击加减

methods: {
      updateVal(val){
            if(val > this.maxNum ) val = this.maxNum
            if(val < this.minNum) val = this.minNum
            this.currentVal = val
     },
     buttonClick (flag) {
           if(flag > 0){
                this.currentVal < this.maxNum ? this.currentVal += this.step : this.maxNum
                this.updateVal(this.currentVal)
           }else{
                this.currentVal > this.minNum ? this.currentVal -= this.step : this.minNum
                this.updateVal(this.currentVal)
           }
     }
}

@click="buttonClick(1)"中，参数分别传入1和-1，代表加和减，所以方法中通过判断参数flag是否大于0来确定是加按钮还是减按钮，里面用了三元运算符。
方法updataVal判断输入值是否小于最小值，是否大于最大值，所以，还需要在第一次初始化时调用，及mounted中

mounted(){
   this.updateVal(this.value)
}

看起来OK了，但是，如果你在input框里输入值，在点击加减按钮，它改变的值还是以前的值，所以要在input框上添加change事件

<input :value="currentVal" @change="fixNumber">

methods: {
     ...  //省略了其他方法
     fixNumber ($event) {
          let fix
          if (typeof $event.target.value != 'number') {fix = Number($event.target.value.replace(/\D/g, ''))}
          else {fix = $event.target.value}
          this.updateVal(fix)
     }
}

这里第5行代码是判断输入值是否是数字类型并做了一个简单的转换。

这里获取input输入值，除了可以用$event.target.value，还可以用this.$refs.input.value。

 

以上。