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 相关文章推荐
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php两种无限分类方法实例
2015/04/21 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript表单验证实现代码
2017/05/22 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python爬取成语接龙类网站
2018/10/19 Python
Scrapy框架使用的基本知识
2018/10/21 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python银行系统实战源码
2019/10/25 Python
wxpython绘制圆角窗体
2019/11/18 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
公司租房协议书范本
2014/10/08 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016中秋节问候语
2015/11/11 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js