vue前端el-input输入 限制输入位数以及输入规则_el-input-number控制输入规则

前端兼容el-input输入时，仅允许输入负号、数字以及小数点，且限制整数位数以及小数位数，且不允许输入除第一个负号以外的其他符号

逻辑梳理

1、使用element-ui插件的el-input组件作为页面元素，为其绑定input事件（我这里是在表格里使用slot插入的inpu元素，所以传入参数使用scope传入）
2、绑定输入事件，传参给工具函数，等待返回值返回
3、传入参数从左到右依次为：
输入框正在输入的值e
整数部分最大输入位数限制intMax（number类型）：控制最大输入几位，超过此值不可继续输入
小数部分最大输入位数限制dotMax（number类型）：同上
输入框绑定的对象row：用于对象绑定
绑定对象上绑定此输入框的键值name：用于数据更新

说明：工具函数内部 return ‘0’ 的内容可以根据需求return不同数据，这里return
0便于判断后续操作是否执行，如果输入不合法字符，直接干掉不合法字符，不需要执行后面逻辑了

代码

html：

<el-input
   autofocus
   v-if="scope.row.isActive == true"
   type="text"
   class="column-remark-input"
   v-model.trim="scope.row.adjustAmount"
   placeholder="调整金额（若有）"
   @blur="numberBlur(scope)"
   @input="inputFocus($event, scope.row, scope)"
></el-input>
1
2
3
4
5
6
7
8
9
10

工具函数：

/* 输入时 */
		inputFocus(e, row, scope) {
            var num = this.inputLimit(e, 12, 2, row, 'adjustAmount')
            console.log("
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/102102