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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
jquery构造器的实现代码小结
May 16 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
全面解析bootstrap格子布局
May 22 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
Vue递归实现树形菜单方法实例
Nov 06 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中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP制作万年历
2015/01/07 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
环境科学专业个人求职信
2013/12/15 职场文书
导游词400字
2015/02/13 职场文书
2015年化验室工作总结
2015/04/23 职场文书
经营目标责任书
2015/05/08 职场文书
毕业酒会致辞
2015/07/29 职场文书
公司安全管理制度范本
2015/08/05 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
高中地理教学反思
2016/02/19 职场文书
python实现高效的遗传算法
2021/04/07 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS