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 相关文章推荐
js获取IP地址的方法小结
Jul 01 Javascript
JS交换变量的方法
Jan 21 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python批量下载图片的三种方法
2013/04/22 Python
python求列表交集的方法汇总
2014/11/10 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
python 实现矩阵填充0的例子
2019/11/29 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
产品销售计划书
2014/05/04 职场文书
招标承诺书
2014/08/30 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
Node.js实现断点续传
2021/06/23 Javascript
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP