vue实现键盘输入支付密码功能


Posted in Javascript onAugust 18, 2018

本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码,供大家参考,具体内容如下

支付密码功能界面如下图:

vue实现键盘输入支付密码功能

主要代码如下:

<template>
 <div class="pay-tool">
  <div class="pay-tool-title border-bottom">
   <span class="icon icon-back" @click="backHandle"></span><strong>请输入交易密码</strong>
  </div>
  <div class="pay-tool-content">
   <div class="pay-tool-inputs">
    <div class="item" v-for="i in items"><span class="icon_dot" v-if="password[i]"></span></div>
   </div>
   <div class="pay-tool-link"><router-link class="link" to="/getP">忘记密码?</router-link></div>
  </div>
  <div class="pay-tool-keyboard">
   <ul>
    <li @click="keyUpHandle($event)" v-for="val in keys">
     {{ val }}
    </li>
    <li class="del" @click="delHandle"><span class="icon-del"><</span></li>
   </ul>
  </div>
 </div>
</template>

<script>
 const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
 // let sendFlag = true // 防止重复发送密码
 export default {
  data () {
   return {
    items: [0, 1, 2, 3, 4, 5],
    keys: keys(),
    password: []
   }
  },
  methods: {
   backHandle () {
    this.clearPasswordHandle() // 返回时清除password
    this.$emit('backFnc') // 返回上级
   },
   keyUpHandle (e) {
    let text = e.currentTarget.innerText
    let len = this.password.length
    if (!text || len >= 6) return
    this.password.push(text)
    this.ajaxData()
   },
   delHandle () {
    if (this.password.length <= 0) return false
    this.password.shift()
   },
   ajaxData () {
    if (this.password.length >= 6) {
     console.log(parseInt(this.password.join(' ').replace(/\s/g, '')))
    }
    return false
   },
   clearPasswordHandle: function () {
    this.password = []
   }
  }
 }
</script>

<style lang="less" scoped>
 .pay-tool {
  position: relative;
  height: 18.93333333rem;
  background-color: #fff;
  overflow: hidden;
  &-title {
   width: 100%;
   height: 2.08888888rem;
   padding: 0 0.8rem;
   line-height: 2.08888888rem;
   text-align: center;
   overflow: hidden;
   .icon {
    float: left;
    margin-top: 0.72222222rem;
   }
   strong {
    font-size: 0.8rem;
   }
  }
  &-content {
   .pay-tool-inputs {
    width: 14.46666666rem;
    height: 2.31111111rem;
    margin: 1.28888888rem auto 0;
    border: 1px solid #b9b9b9;
    border-radius: 0.26666666rem;
    box-shadow: 0 0 1px #e6e6e6;
    display: flex;
    .item {
     width: 16.66666666%;
     height: 2.31111111rem;
     border-right: 1px solid #b9b9b9;
     line-height: 2.31111111rem;
     text-align: center;
     &:last-child {
      border-right: none;
     }
     .icon_dot {
      display: inline-block;
      width: 0.51111111rem;
      height: 0.51111111rem;
      background: url("../../assets/images/icon_dot.png") no-repeat;
      background-size: cover;
     }
    }
   }
   .pay-tool-link {
    padding: 0.53333333rem 0.8rem 0;
    text-align: right;
    .link {
     font-size: 0.66666666rem;
     color: #3c8cfb;
    }
   }
  }
  .pay-tool-keyboard {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
     width: 33.3333%;
     height: 2.25442834rem;
     line-height: 2.25442834rem;
     text-align: center;
     border-right: 1px solid #aeaeae;
     border-bottom: 1px solid #aeaeae;
     font-size: 0.8rem;
     font-weight: bold;
     &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      border-top: 1px solid #eee;
     }
     &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
      border-right: none;
     }
     &:nth-child(10), &:nth-child(11), &:nth-child(12) {
      border-bottom: none;
     }
     &:nth-child(10), &:nth-child(12), &:active {
      background-color: #d1d4dd;
     }
     &:nth-child(12):active {
      background-color: #fff;
     }
    }
   }
  }
 }
</style>

注意:页面使用rem布局,根html的font-size为45px。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 #Javascript
Vue实现6位数密码效果
Aug 18 #Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 #Javascript
详解Angular6 热加载配置方案
Aug 18 #Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
You might like
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python调用微信公众平台接口操作示例
2017/07/08 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
C#公司笔试题
2014/03/28 面试题
进程的查看和调度分别使用什么命令
2013/12/14 面试题
幼师自荐信范文
2013/10/06 职场文书
计算机应用专业毕业生求职信
2013/10/24 职场文书
毕业生自荐书
2014/02/03 职场文书
体育活动总结范文
2014/05/04 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
工商局个人工作总结
2015/03/03 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL