• 业务场景:

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

  

  点击确定,输入框自动清空非数字的输入,并且自动获得焦点,如图:

  • 实现方案:

实现的想法:

给输入框添加一个 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

POS开发问题 - 输入非数字弹出提示框的实现的更多相关文章

  1. 如何实现android蓝牙开发 自动配对连接,并不弹出提示框

    之前做一个android版的蓝牙 与血压计通讯的项目,遇到最大的难题就是自动配对. 上网查资料说是用反射createBond()和setPin(),但测试时进行配对还是会出现提示,但配对是成功了 我就 ...

  2. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  3. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  4. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  5. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  6. [转] 在Asp.net前台和后台弹出提示框

    一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...

  7. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ,弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

  8. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  9. C#自动关闭弹出提示框

    自动关闭弹出提示框(用一个小窗体显示提示信息):例如在一个form窗体中弹出自动关闭的提示框1.首先创建一个弹出提示信息的窗体 AutoCloseMassageBox,在里面拖一个lable控件,去掉 ...

随机推荐

  1. docker log: containerid-json.log 文件disappear,问题排查及解决方案

    问题排查: 运行 #docker info   查阅资料,知道了docker的logging driver相关理论:https://docs.docker.com/engine/admin/loggi ...

  2. python for i in range(n,m)注意...

    for i in range(n,m) 区间包含n不含m

  3. 《图解HTTP》阅读笔记--第十一章针对web的攻击技术

    第十一章.针对WEB的攻击技术 ----<图解HTTP>阅读笔记攻击目标---Web简单的HTTP协议本身并不存在安全性 问题,协议本身并不会成为被攻击的对象,应用HTTP的服务器和客户端 ...

  4. 树状数组【bzoj1103】: [POI2007]大都市meg

    1103: [POI2007]大都市meg 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了. 不过,她经常回忆起以前在乡间漫步的情景.昔日,乡 ...

  5. SpriteBuilder 不能对设置spriteframe的sprite进行设置dynamic Physics解决办法

    可能spriteBuilder是最新推出 cocos2d 可视化,在学习过程中遇到一些Bug,比如你对一个精灵设置了一个动画帧(spriteframe),这并不会改变他的物理属性,正常来说是可以设置他 ...

  6. Linux安装vim编辑器

    1.ubuntu系统:普通用户下输入命令:sudo apt-get install vim-gtk (注:出现E: Unable to locate package则将命令改成sudo apt-get ...

  7. 记录Leetcode 鸡蛋掉落 的思路

    前言 首先看一下这个题目,是Leetcode的第887题"鸡蛋掉落": 你将获得 `K` 个鸡蛋,并可以使用一栋从 `1` 到 `N` 共有 `N` 层楼的建筑. 每个蛋的功能都是 ...

  8. jquery each循环,实现break和continue的功能

    break----用return false; continue --用return ture;

  9. hive参数设置

    -- 设置hive的计算引擎为spark set hive.execution.engine=spark; -- 修复分区 set hive.msck.path.validation=ignore; ...

  10. vue常见依赖安装

    1):$ npm install less less-loader --save 2)style里 <style lang='less'> 2): $ npm i vue-resource ...