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 相关文章推荐
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
浅谈JavaScript中this的指向问题
Jul 28 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+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python中自定义函数的教程
2015/04/27 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Django时区详解
2019/07/24 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
人事部主管岗位职责
2013/12/26 职场文书
环保倡议书格式范文
2014/05/14 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
提档介绍信范文
2015/10/22 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫