POS开发问题 - 输入非数字弹出提示框的实现
业务场景:
一个输入框,如果输入非数字,那么弹出提示框,如下图
点击确定,输入框自动清空非数字的输入,并且自动获得焦点,如图:
实现方案:
实现的想法:
给输入框添加一个 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版的蓝牙 与血压计通讯的项目,遇到最大的难题就是自动配对. 上网查资料说是用反射createBond()和setPin(),但测试时进行配对还是会出现提示,但配对是成功了 我就 ...
- iOS bug 之 H5 页面没有弹出提示框
描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- PHP弹出提示框并跳转到新页面即重定向到新页面
本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下 这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...
- [转] 在Asp.net前台和后台弹出提示框
一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ,弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- C#自动关闭弹出提示框
自动关闭弹出提示框(用一个小窗体显示提示信息):例如在一个form窗体中弹出自动关闭的提示框1.首先创建一个弹出提示信息的窗体 AutoCloseMassageBox,在里面拖一个lable控件,去掉 ...
随机推荐
- socketserver,threading
一,socketserver #server import socketserver class Myserver(socketserver.BaseRequestHandler): def han ...
- Jmeter-逻辑控制器之Switch控制器(Switch Controller)
Switch控制器(Switch Controller): 作用:Switch控制器通过给该控制器中的Value赋值,来指定运行哪个采样器.有两种赋值方式: 第一种是数值,Switch控制器下的子节点 ...
- P4234 最小差值生成树 LCT维护边权
\(\color{#0066ff}{ 题目描述 }\) 给定一个标号为从 \(1\) 到 \(n\) 的.有 \(m\) 条边的无向图,求边权最大值与最小值的差值最小的生成树. \(\color{#0 ...
- kuangbin专题七 HDU3974 Assign the task (dfs时间戳建树)
There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...
- .net mvc 框架实现后台管理系统
原文: https://www.cnblogs.com/ymnets/p/3424309.html -->底层实现 https://www.layui.com/ -->UI实现
- 安装OFFICE2016错误代码0-1018(0)的解决方案 和激活方案
一.安装OFFICE2016错误代码0-1018(0)的解决方案 下面方法亲测有效:Step 1. Go to C:\Program Files\Common Files\microsoft shar ...
- Apache 403 错误。。
两个方面.. 一: httpd.conf 是否有 <directory '/www'></directory> 是否有 Deny from all 或者 Require l ...
- C语言中的头文件
1.头文件#include <> :表示引用标准库头文件,编译器会从系统配置的库环境中去寻找 2.头文件#include "":一般表示用户自己定义使用的头文件,编译器 ...
- 通过JS,按照原比例控制图片尺寸
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...
- (转)如何使用caffe的MATLAB接口
编译MatCaffe 转自: http://blog.csdn.net/ws_20100/article/details/50525879 使用如下命令编译MatCaffe make all matc ...