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

    禁用状态

    InputNumber 计数器 - 图1

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

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

    步数

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

    InputNumber 计数器 - 图2

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

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

    精度

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

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

    尺寸

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

    1. <template>
    2. <el-input-number v-model="num1"></el-input-number>
    3. <el-input-number size="medium" v-model="num2"></el-input-number>
    4. <el-input-number size="small" v-model="num3"></el-input-number>
    5. <el-input-number size="mini" v-model="num4"></el-input-number>
    6. </template>
    7. <script>
    8. export default {
    9. data() {
    10. return {
    11. num1: 1,
    12. num2: 1,
    13. num3: 1,
    14. num4: 1
    15. }
    16. }
    17. </script>

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

    Attributes

    Events