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控件,去掉 ...
随机推荐
- T-Sql操作Xml数据(转)
T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...
- P2115 [USACO14MAR]破坏Sabotage
题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...
- pf4j实例 插件框架
实现整个过程需要三个部分,第一就是根接口,第二是插件,第三是应用程序.这是3个java项目. 首先要下载jar包,百度搜索maven repository,然后搜索pf4j,如下图,下载第一个的相应版 ...
- Java Applet 素数小程序
en... 1. Applet 这个远古的东西,今天我同学让我帮他看看代码,说applet运行出错.额,反正闲着也是闲着,看看呗 ,结果看到代码...4 2.就是实现这破玩意 package calc ...
- mysql 常用函数。。
FIND_IN_SET(str,strlist) ,strlist 是 一个 由 逗号 分割的字符串,要注意 strlist 不能有逗号.. 它 等于 where str in (1,2,3***) ...
- C语言之对指针概念的初步探究
指针?什么是指针? 指针(pointer)是一个值为内存地址的变量(或数据对象). 接下来从变量的角度分析: 变量有两个属性,一个是地址,一个是值. 指针与普通变量的不同之处在于:指针变量的值是一个内 ...
- Codeforces Round #532 (Div. 2)- A(思维)
This morning, Roman woke up and opened the browser with nn opened tabs numbered from 11 to nn. There ...
- P1060 开心的金明(动态规划背包问题)
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱 ...
- 10-排序6 Sort with Swap(0, i) (25 分)
Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...
- newSingleThreadExecutor单任务线程池使用
1.newSingleThreadExecutor单任务线程池, 一次只执行一个任务 package ThreadTest; import java.util.concurrent.Executo ...