Element 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. 小结

计数器功能完善,足以支持绝大多数对数字输入的需求。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页