vue 支付密码组件

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

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

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

Vue 整体代码如下：

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()

}

}

}

}

.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;

}

}

}

}

使用：

import PasswordInput from '@/components/PasswordInput'

methods: {

getPwd(password) {

console.log(password)

}

}

参考文章：