Element UI 数字输入框的实现

方法一：添加正则校验

缺点：需要根据需要变更正则表达式

<template><el-form ref="formRef" :model="formData" label-width="80px" size="mini"><el-form-itemlabel="数字"prop="num":rules="[{pattern: /^[1-9]\d*$/,message: '请输入大于0的整数！',trigger: 'change',},]"><el-inputclearableplaceholder="请输入大于0的整数！"v-model="formData.num"style="width: 200px"></el-input></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {},};},
};
</script>

方法二：使用 el-input-number

缺点：输入超出最大和最小值的数据时，会自动更正为最大和最小值，用户容易产生误解，以为是bug。

<!-- 只能输入0-100的整数的数字输入框 --><el-input-number:controls="false"v-model="num":min="0":max="100":precision="0"></el-input-number>

    <!-- 只能输入-100到100的两位小数的数字输入框 --><el-input-number:controls="false"v-model="num2":min="-100":max="100":precision="2"></el-input-number>

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	—	0
min	设置计数器允许的最小值	number	—	-Infinity
max	设置计数器允许的最大值	number	—	Infinity
step	计数器步长	number	—	1
step-strictly	是否只能输入 step 的倍数	boolean	—	false
precision	数值精度	number	—	—
size	计数器尺寸	string	large, small	—
disabled	是否禁用计数器	boolean	—	false
controls	是否使用控制按钮	boolean	—	true
controls-position	控制按钮位置	string	right	-
name	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
placeholder	输入框默认 placeholder	string	-	-

事件名称	说明	回调参数
change	绑定值被改变时触发	currentValue, oldValue
blur	在组件 Input 失去焦点时触发	(event: Event)
focus	在组件 Input 获得焦点时触发	(event: Event)

方法名	说明	参数
focus	使 input 获取焦点	-
select	选中 input 中的文字	—

若想实现更多功能，可以参考：
《Element UI 源码改造 —— 自定义数字输入框的实现》
https://blog.csdn.net/weixin_41192489/article/details/116748305

Element UI 数字输入框的实现相关推荐

Element UI——数字输入框解决方案
问题描述当我们开发项目时,常常想限制用户只能输入纯数字: 官方文档 https://element.eleme.cn/#/zh-CN/component/input https://element. ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
Element UI数字组件四舍五入问题及居右显示
1.数字组件会自动进行四舍五入,通过以下方法,可以直接进行位数的截取. <el-input-number v-model="vv" controls-position=&qu ...
Vue+Element ui input输入框，扫码枪触发 enter事件，多次快速扫描会出现字符丢失的问题（已解决）
input输入框,扫码枪触发 enter事件,多次快速扫描第二次字符会丢失修改之前代码: 在接口返回过来值之后,将input框值清空掉这样写用键盘enter键快速触发多次,也不会有任何问题,但是 ...
element ui el-input输入框type=number去掉上下箭头
使用vue框架写法 <div class="container"><el-input v-model="value" type="n ...
element UI——input输入框只读不写需求设置
在 el-input标签内添加readonly属性: <div><p><strong>截至此时,本次按月补贴决算总金额为:</strong></p ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
Element UI输入框focus()方法自动获取焦点失败处理方法
Element UI输入框focus()方法自动获取焦点失败处理方法本来想通过自定义事件触发输入框,并获取焦点,但是使用官方提示的focus()方法一直失效后来百度了半天,终于找到一个比较好的 ...

Element UI 数字输入框的实现

方法一：添加正则校验

方法二：使用 el-input-number

Element UI 数字输入框的实现相关推荐

最新文章

热门文章