Vue仿支付宝支付功能


Posted in Javascript onMay 25, 2018

先给大家上个效果图:

Vue仿支付宝支付功能 

<div class="goods-psd">
  <p class="apply-title">
   请输入支付密码
  </p>
  <p style="margin: 0.2rem">确认支付 <span>{{password}}</span> </p>
  <div class="psd-container">
   <input class="psd-input" type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value">
  </div>
 </div>
 <div class="input-pan">
  <div class="pan-num" v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div>
 </div>
</div>

不管逻辑有没有搞懂,先把样式写出来总是没错啦~

思路梳理

1.输入框使用for循环,循环出6个input; 2.下面的按键使用for循环,便于后期存储记录; 3.将所输入的密码放入到pasgroup数组中; 4.定义输入框的下标,将pasgroup数组内容按照下标依次放入input内; 5.开始代码啦~

代码

data () {
  return {
   popupVisible1: true,
   realInput: '',
   password: '111',
   passwordGroup: [],
   number: ['1','2','3','4','5','6','7','8','9','取消','0','删除'],
   pasgroup: [],
   currentInputIndex:-1
  }
 }

在data内定义好我们需要的元素

initPasswordGroup () {
 this.passwordGroup=[];
 for(var i=0;i<6;i++){
  this.passwordGroup.push({
    value:null
  })
 }
}

循环出input,将其内容赋值为value:null,在界面上显示出6个输入框

watch: {
  currentInputIndex (val) {
   if(val == 5){
    console.log(this.pasgroup)
   }else if(val <= -1){
    this.currentInputIndex = -1
   }
  }
 }

监听数组下标的变化,当下标到5的时候打印出该数组

inputPsd (value) {
   switch (value) {
    case '取消':
     this.currentInputIndex = -1
     this.pasgroup = []
     this.initPasswordGroup ()
     break;
    case '删除':
     this.pasgroup.pop()
     console.log(this.pasgroup)
     // this.currentInputIndex 下标值,删除添加时改变
     this.passwordGroup[this.currentInputIndex].value = null
     this.currentInputIndex--
     console.log(this.passwordGroup)
     break;
    default:
     this.pasgroup.push(value)
     this.currentInputIndex++
     this.passwordGroup[this.currentInputIndex].value = value
   }
  },

获取到所点击的元素,当点击‘取消'时清空input 输入框内的内容,清除数组;当点击‘删除'时,下标值依次减减,将value重置为null; 当点击其他数字时,下标值依次增加,将数组pasgroup[]里面的内容写进passwordGroup[]里面,在输入框中展示。

总结

以上所述是小编给大家介绍的Vue仿支付宝支付功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
微信小程序实现人脸检测功能
May 25 #Javascript
微信小程序实现人脸识别
May 25 #Javascript
微信小程序实现刷脸登录
May 25 #Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 #Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 #Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 #Javascript
Webpack中雪碧图插件使用详解
May 25 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP经典面试题集锦
2015/03/19 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
用Python实现读写锁的示例代码
2018/11/05 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
品质标语大全
2014/06/21 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
客户答谢会致辞
2015/01/20 职场文书
迎新生晚会主持词
2015/06/30 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书