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。

 

以上。