el-input-number 计数器使用

茶白

2021 年 03 月 16 日

暂无评论

1014字数

vue html

# 1. 用途

计数器是一种特殊的输入框，用来输入数字。除了可以直接键盘输入外，还支持通过按钮对数字进行调整。

# 2. 基本用法

如下示例，计数器显示数字绑定变量后，可以直接通过+/-按钮调整数值。

```html
	基本用法
    <el-input-number v-model="num1" label="请输入数量"></el-input-number>
    <el-divider></el-divider>
```

效果：
![image.png](https://blog.11dz.cn/usr/uploads/2022/07/3487888271.png)

# 3. 指定最大、最小值

可以为计数器指定数值的最大、最小值，当到达最大、最小值时，相应按钮被禁用。

```html
 指定最大、最小值
    <el-input-number v-model="num2" :min="1" :max="10" label="请输入数量"></el-input-number>
    <el-divider></el-divider>
```

效果：

![image.png](https://blog.11dz.cn/usr/uploads/2022/07/2561493241.png)

# 4. 监控数值变化

可以通过`@change`方法监控计数器的数值变化事件。

```html
    监控输入变化
    <el-input-number v-model="num3" @change="numChange"></el-input-number>
    <el-divider></el-divider>
```

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

# 5. 自定义步数

可以自定义每次点击点击按钮数字变化量，即`步数`，如下代码每次点击加号，则增大3。

```html
    自定义步数
    <el-input-number v-model="num4" :step="3"></el-input-number>
    <el-divider></el-divider>
```

# 6. 自定义精度

可以指定数据的精度。

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

![image.png](https://blog.11dz.cn/usr/uploads/2022/07/2899611836.png)

# 7. 调整按钮位置

按钮位置可以调整到输入框右侧，但是不支持调整到左侧等其他位置。

```html
 调整按钮位置
    <el-input-number v-model="num6" controls-position="right"></el-input-number>
    <el-divider></el-divider>
```

![image.png](https://blog.11dz.cn/usr/uploads/2022/07/3862397055.png)

# 8. 小结

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

最后修改：2021 年 03 月 16 日

如果觉得我的文章对你有用，请随意赞赏

el-input-number 计数器使用

茶白 • 2021 年 03 月 16 日

el-input-number 计数器使用

发表评论取消回复

在线影视视频网站合集

js奇淫技巧（一）

常见的app scheme大全

uniapp图片未加载成功前处理方案,防止闪烁

浏览器console引入jq

HTML CSS背景颜色彩色渐变色

python启动报错找不到requirements.txt文件

C# .net winform全局异常处理

php post接收不到json数据

vue触底，触顶事件

el-input-number 计数器使用

发表评论 取消回复

el-input-number 计数器使用

发表评论取消回复