vue前端el-input输入 限制输入位数以及输入规则
admin 阅读： 2024-03-31
| 后台-插件-广告管理-内容页头部广告（手机） |
vue前端el-input输入 限制输入位数以及输入规则
- 逻辑梳理
- 代码
前端兼容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("声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
在线投稿：投稿 站长QQ：1888636
| 后台-插件-广告管理-内容页尾部广告（手机） |
