技術標籤：前端----ElementElement計數器步數限制el-input-number

1. 用途

計數器是一種特殊的輸入框，用來輸入數字。除了可以直接鍵盤輸入外，還支援通過按鈕對數字進行調整。

2. 基本用法

如下示例，計數器顯示數字繫結變數後，可以直接通過+/-按鈕調整數值。

	基本用法
    <el-input-number v-model="num1" label="請輸入數量"></el-input-number>
    <el-divider></el-divider>

效果：

3. 指定最大、最小值

可以為計數器指定數值的最大、最小值，當到達最大、最小值時，相應按鈕被禁用。

 指定最大、最小值
    <el-input-number v-model="num2" :min="1" :max="10" label="請輸入數量"></el-input-number>
    <el-divider></el-divider>

效果：

4. 監控數值變化

可以通過@change方法監控計數器的數值變化事件。

    監控輸入變化
    <
 
el-input-number v-model="num3" @change="numChange"></el-input-number>
    <el-divider></el-divider>

 methods: {
    numChange(value) {
      console.log(value);
    }
  }

5. 自定義步數

可以自定義每次點選點選按鈕數字變化量，即步數，如下程式碼每次點選加號，則增大3。

    自定義步數
    <el-input-number v-model
 
="num4" :step="3"></el-input-number>
    <el-divider></el-divider>

6. 自定義精度

可以指定資料的精度。

    自定義精度
    <el-input-number v-model="num5" :step="0.01" :precision="2"></el-input-number>
    <el-divider></el-divider>

7. 調整按鈕位置

按鈕位置可以調整到輸入框右側，但是不支援調整到左側等其他位置。

 調整按鈕位置
    <el-input-number v-model="num6" controls-position="right"></el-input-number>
    <el-divider></el-divider>

8. 小結

計數器功能完善，足以支援絕大多數對數字輸入的需求。