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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP微信分享开发详解
2017/01/14 PHP
用jscript实现新建word文档
2007/06/15 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JSON 数据格式详解
2017/09/13 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
Python常用模块介绍
2014/11/21 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
itchat接口使用示例
2017/10/23 Python
如何用python整理附件
2018/05/13 Python
Flask框架配置与调试操作示例
2018/07/23 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
关于python中的xpath解析定位
2020/03/06 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
聘任书的写作格式及范文
2014/03/29 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
个人安全生产承诺书
2014/05/22 职场文书
股东授权委托书范文
2014/09/13 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs