vue 支付密码组件

Easter79
• 阅读 1145

vue 支付密码组件

我们要做一个类似京东、支付宝支付时的6位密码组件,效果如下。

vue 支付密码组件

专门为PC端写的。移动端的很多框架基本都已经有了,而且实现逻辑会比pc简单,因为是移动端一般配单独键盘,甚至不需要input框,不用考虑鼠标,所以对焦点的处理会简单一些。而且移动端没有password autocomplete 的烦心事。

pc 端如果使用 input password 组件的话(参考文章:https://www.jianshu.com/p/03d2a4744258 ),chrome无论怎样都会弹出密码管理窗口。如使用autocomplete=new-password虽然不会自动填充,但还是会弹出密码管理窗口。所以我们使用input text/tel 组件,然后用•或*给盖住。

Vue 整体代码如下:

<template>
  <div :id="`ids_${id}`" class="m-password-input">
    <div v-for="(v, i) in 6" :key="i" class="box-input">
      <div v-show="pwdList[i]" class="u-dot" @click="changePwd">•</div>
      <input
        :key="i"
        v-model="pwdList[i]"
        type="tel"
        readonly
        onfocus="this.removeAttribute('readonly');"
        maxlength="1"
        autocomplete="new-password"
        class="u-input"
        @input="changeInput"
        @click="changePwd"
        @keyup="keyUp($event)"
        @keydown="oldPwdList = pwdList.length"
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 1 // 当一个页面有多个密码输入框时,用id来区分
    }
  },
  data() {
    return {
      pwdList: [],
      pwdListReal: [],
      oldPwdList: [],
      isDelete: false,
      ipt: ''
    }
  },
  mounted() {
    this.ipt = document.querySelectorAll(`#ids_${this.id} .u-input`)
  },
  methods: {
    keyUp(ev) {
      let index = this.pwdList.length
      if (!index) return
      if (ev.keyCode === 8) {
        this.isDelete = true
        if (this.oldPwdList === this.pwdList.length) {
          if (index === this.pwdList.length) {
            this.pwdList.pop()
          }
          index--
        } else {
          index > 0 && index--
        }
        this.ipt[index].focus()
      } else if (this.isDelete && index === this.pwdList.length && /^\d$/.test(ev.key)) {
        this.isDelete = false
        this.pwdList.pop()
        this.pwdList.push(ev.key)
        this.ipt[this.pwdList.length] && this.ipt[this.pwdList.length].focus()
      }
      this.$emit('get-pwd', this.pwdList.join(''))
    },
    changePwd() {
      let index = this.pwdList.length
      index === 6 && index--
      this.ipt[index].focus()
    },
    changeInput() {
      let index = this.pwdList.length
      const val = this.pwdList[index - 1]
      if (!/[0-9]/.test(val)) {
        this.pwdList.pop()
        return
      }
      if (!val) {
        this.pwdList.pop()
        index--
        if (index > 0) this.ipt[index - 1].focus()
      } else {
        if (index < 6) this.ipt[index].focus()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.m-password-input {
  display: flex;
  border-radius: 5px;
  padding: 10px 0;
  border: 1px solid #cccccc;
  position: relative;
  margin-left: 1px;
  .box-input {
    display: inline-block;
    position: relative;
    border-right: 1px solid #cccccc;
    &:last-child{
      border-right:0;
    }
    .u-dot {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }
    .u-input {
      text-align: center;
      font-size: 30px;
      float: left;
      width: 40px;
      height: 20px !important;
      color: transparent;
      caret-color: #333333;
      outline: unset;
      border: none;
      border-right: 1px solid #cccccc;
      &:last-child{
        border-right:0;
      }
    }
  }
}
</style>

使用:

<password-input @get-pwd="getPwd" />
import PasswordInput from '@/components/PasswordInput'
methods: {
    getPwd(password) {
      console.log(password)
    }
  }

参考文章:

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k