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 面向对象编程(2) 定义类
May 18 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
BootStrap的两种模态框方式
May 10 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vue与django集成打包的实现方法
Nov 11 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
深入了解js原型模式
2019/05/30 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年民政工作总结
2014/11/26 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书