要使用它,只需要在元素中使用v-model绑定变量即可,变量的初始值即为默认值。

    禁用状态

    InputNumber 计数器 - 图2

    disabled属性接受一个Boolean,设置为true即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min属性和max属性,不设置minmax时,最小值为 0。

    1. <template>
    2. <el-input-number v-model="num" :disabled="true"></el-input-number>
    3. </template>
    4. export default {
    5. data() {
    6. return {
    7. num: 1
    8. }
    9. }
    10. </script>

    步数

    设置step属性可以控制步长,接受一个Number

    InputNumber 计数器 - 图4

    step-strictly属性接受一个。如果这个属性被设置为true,则只能输入步数的倍数。

    <template>
      <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
    </template>
    <script>
      export default {
        data() {
          return {
            num: 2
          }
        }
      };
    </script>
    

    精度

    设置 precision 属性可以控制数值精度,接收一个 Number

    precision 的值必须是一个非负整数,并且不能小于 step 的小数位数。

    尺寸

    额外提供了 mediumsmallmini 三种尺寸的数字输入框

    <template>
      <el-input-number v-model="num1"></el-input-number>
      <el-input-number size="medium" v-model="num2"></el-input-number>
      <el-input-number size="small" v-model="num3"></el-input-number>
      <el-input-number size="mini" v-model="num4"></el-input-number>
    </template>
    <script>
      export default {
        data() {
          return {
            num1: 1,
            num2: 1,
            num3: 1,
            num4: 1
          }
        }
      };
    </script>
    

    设置 controls-position 属性可以控制按钮位置。

    Attributes

    Events