POS开发问题 - 输入非数字弹出提示框的实现
2017-06-20 14:53
323 查看
业务场景:
一个输入框,如果输入非数字,那么弹出提示框,如下图
点击确定,输入框自动清空非数字的输入,并且自动获得焦点,如图:
实现方案:
实现的想法:
给输入框添加一个 input 事件,给输入框绑定 ref,在事件中判断 输入框 v-model 绑定的那个data 值有没有非数字,如果有就 给出提示框( 提示框已经封装好了,点击确定会提供一个回调函数),点击确定之后,给 v-model 绑定的 data 属性清空 非数字,然后this.$refs[ref].focus() 方法获取输入焦点实现的难点:
由于以上的需求很多页面都需要这样的校验,所以决定在 vue 对象的原型上添加一个校验的方法 $check_inputIsNum,实现过程中,有一个难点,就是 “ 给输入框v-model 绑定的 data 属性清空非数字 ”,
vue中,输入框的value的值是不能通过 dom 操作来改变的,要改变输入框的值,只能通过改变v-model 绑定的属性,如果该属性就在data数据的最外层就定义了还好,那么this.xxx就可以改变,我们就可以传递2个参数 一个就是 v-model 绑定的 data 属性 ,一个就是 ref ,发现不符合要求,直接this.xxx就改变输入框的输入值;
不过输入框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
相关文章推荐
- POS开发问题 - 多个弹出框的实现
- 如何实现android蓝牙开发 自动配对连接,并不弹出提示框
- android开发EditText输入时弹出数字输入键盘
- 如何实现android蓝牙开发 自动配对连接,并不弹出提示框
- JS实现在文本框输入时自动弹出相关内容提示
- 4. 用户在文本框1,2中输入两个数,点击按钮,在文本框3中显示从文本框1的数字到文本框2中的数字之间的累加和。如果1或则2为错误的数据格式,则弹出对话框提示错误。如果文本框1中的数字比文本框2中的数字大,则提示错误。
- android开发EditText输入时弹出数字输入键盘
- 1怎样让输入的text文本填写的部分只添加数字、2怎样将输入的数字一次性全部删除 3怎样选择密码 让它不显示 4 怎样实现在没有return的情况下点击button的情况下就能够使键盘页面下落5 怎样实现点击指定的button来对使指定的text进行键盘弹出 6怎样改变button按钮的状态
- 如何实现android蓝牙开发 自动配对连接,并不弹出提示框
- 今天在实现ToolTip时发生的 0xfeeefeee问题,单击static控件时不能弹出提示问题
- 解决在iOS开发的代码中实现scp的ssh远程连接,怎么输入密码问题
- JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
- Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度
- Android Edittext 开发常见问题总结(焦点、输入、键盘弹出等)
- 将Capicom调用代码封装到ActiveX——解决javascript调Capicom读取数字证书信息时,IE弹出安全提示的问题
- [置顶] android开发之使edittext输入弹出数字软键盘。亲测可用。手机号登陆注册常用。
- 如何实现android蓝牙开发 自动配对连接,并不弹出提示框
- 将Capicom调用代码封装到ActiveX——解决javascript调Capicom读取数字证书信息时,IE弹出安全提示的问题
- java开发配置jdk问题,在cmd中输入java好使,但输入javac提示错误
- 如何实现android蓝牙开发 自动配对连接,并不弹出提示框