• 业务场景:

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

  

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

  • 实现方案:

实现的想法:

给输入框添加一个 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. T-Sql操作Xml数据(转)

    T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...

  2. P2115 [USACO14MAR]破坏Sabotage

    题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...

  3. pf4j实例 插件框架

    实现整个过程需要三个部分,第一就是根接口,第二是插件,第三是应用程序.这是3个java项目. 首先要下载jar包,百度搜索maven repository,然后搜索pf4j,如下图,下载第一个的相应版 ...

  4. Java Applet 素数小程序

    en... 1. Applet 这个远古的东西,今天我同学让我帮他看看代码,说applet运行出错.额,反正闲着也是闲着,看看呗 ,结果看到代码...4 2.就是实现这破玩意 package calc ...

  5. mysql 常用函数。。

    FIND_IN_SET(str,strlist) ,strlist 是 一个 由 逗号 分割的字符串,要注意 strlist 不能有逗号.. 它 等于  where str in (1,2,3***) ...

  6. C语言之对指针概念的初步探究

    指针?什么是指针? 指针(pointer)是一个值为内存地址的变量(或数据对象). 接下来从变量的角度分析: 变量有两个属性,一个是地址,一个是值. 指针与普通变量的不同之处在于:指针变量的值是一个内 ...

  7. 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 ...

  8. P1060 开心的金明(动态规划背包问题)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱 ...

  9. 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 ...

  10. newSingleThreadExecutor单任务线程池使用

    1.newSingleThreadExecutor单任务线程池,   一次只执行一个任务 package ThreadTest; import java.util.concurrent.Executo ...