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 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
AngularJS内置指令
Feb 04 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 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代码DOS造成用光网络带宽
2011/03/01 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
javascript基本语法
2016/05/31 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
一道python走迷宫算法题
2018/01/22 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
高中生自我鉴定范文
2013/10/30 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
python实现过滤敏感词
2021/05/08 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
css3 选择器
2022/05/11 HTML / CSS