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技术实现Tab页界面之二
Sep 21 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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到5.3.3的过程及注意事项
2010/10/12 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP多进程编程实例
2014/10/15 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
自动更新作用
2006/10/08 Javascript
javascript中对对层的控制
2006/12/29 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
浅析js封装和作用域
2013/07/09 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
面试常见的js算法题
2017/03/23 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
小学教师培训方案
2014/06/09 职场文书
校本教研活动总结
2014/07/01 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript