POS开发问题 - 输入非数字弹出提示框的实现

时间：2022-07-11 08:54:38

  • 业务场景：

　　一个输入框，如果输入非数字，那么弹出提示框，如下图

　　POS开发问题 - 输入非数字弹出提示框的实现

　　点击确定，输入框自动清空非数字的输入，并且自动获得焦点，如图：POS开发问题 - 输入非数字弹出提示框的实现

  • 实现方案：

实现的想法：

给输入框添加一个 input 事件，给输入框绑定 ref，在事件中判断 输入框 v-model 绑定的那个data 值有没有非数字，如果有就 给出提示框( 提示框已经封装好了，点击确定会提供一个回调函数)，点击确定之后，给  v-model 绑定的 data 属性清空 非数字，然后this.$refs[ref].focus() 方法获取输入焦点

实现的难点：

  1. 由于以上的需求很多页面都需要这样的校验，所以决定在 vue 对象的原型上添加一个校验的方法 $check_inputIsNum，
  2. 实现过程中，有一个难点，就是 “  给输入框v-model 绑定的 data 属性清空非数字  ”，
  3. vue中，输入框的value的值是不能通过 dom 操作来改变的，要改变输入框的值，只能通过改变v-model 绑定的属性，如果该属性就在data数据的最外层就定义了还好，那么this.xxx就可以改变，我们就可以传递2个参数 一个就是 v-model 绑定的 data 属性 ，一个就是 ref ，发现不符合要求，直接this.xxx就改变输入框的输入值；
  4. 不过输入框v-model 绑定的 data 属性 是嵌套了好几层得很话，也就是this.xxx.xxx.xxx...那么我们要改变输入框的值，就要 this.xxx.xxx.xxx... = XXXX 这样子，然而到底嵌套多小层，是不知道的

最后定的实现：

给$check_inputIsNum 方法传递 3 个参数 （data , msg , ref ），

    • data ： 类型：string 或者Array ，由于描述 输入框双向绑定的 date 的层级 （ 如果  v-model="a.b.c"  ， 那么 data = ['a','b','c' ] ）
    • msg ： 类型：string ， 校验不通过的提示 “ XXX必须是数字 ”
    • ref ：类型： string ， 输入框的 ref 值

check_inputIsNum 先校验输入的值没有非数字，有就提示 “XXX必须是数字” ， 点击确定后，执行回调函数

    • 回调里面 先判断data 长度是不是 1 ， 如果是，  this[ data[0] ] = XXX，来改变输入框的值
    • 如果 > 1 ，添加 一个变量_data ， 对 data 进行 forEach 循环 ， 如果是第一次循环（index == 0 ） ，那么 _data = this[ item ] , 否则  _data = _data [ item ]
    • 如果 循环到倒数第二个（index === ( data.length - 2），那么 就可以改变输入框的值了： _data [ data[index + 1] ] = XXXX;

具体实现代码：

if ( data instanceof Array ) {
　　if ( data.length < 2 ) {
　　　　vm[data[0]] = val.replace(/[^\d]/g,'');
　　　　return;
　　}
　　var _updata ;
　　data.forEach( ( item , index ) => {
　　　　if ( index === 0 ) {
　　　　　　_updata = vm[item];
　　　　} else {
　　　　　　_updata = _updata[item];
　　　　}
　　　　if ( index === ( data.length - 2 ) ) {
　　　　　　_updata[data[index + 1]] = val.replace(/[^\d]/g,'') ;
　　　　}
　　} ) ;
}

总结 ： 上面标注红色的目的，只是获得 v-model 绑定的引用 ，例如

v-model="a.b.c"  ， 那么 要获得 this.a.b.c

v-model="a.b"  ， 那么 要获得 this.a.b

相关文章