Vue版支付密码代码
效果展示
HTML
<div class="spend-pay-1">
<div class="spend-pay-2">支付密码</div>
<!-- 支付框 -->
<div class='am_payPwd' :id="`ids_${id}`">
<input type="password"
autocomplete="new-password"
maxlength="1"
@input="changeInput"
@click="changePwd"
v-model="pwdList[i]"
@keyup="keyUp($event)"
@keydown="oldPwdList = pwdList.length"
class="shortInput"
v-for="(v, i) in 6" :key="i">
</div>
<!--后一篇文章说明 autocomplete="new-password"作用-->
<!-- 结束 -->
</div>
<div>
<div class="spend-pay-3">请输入6位数字支付密码</div>
<div class="spend-pay-4">忘记密码?</div>
</div>
<div class="spend-pay-5">
<el-button class="spend-pay-button" type="primary" round >
去支付
</el-button>
</div>
Javascript
export default {
data () {
return {
//支付框
pwdList: [],
oldPwdList: [],
isDelete: false,
ipt: '',
//结束
};
},
//支付框
props: {
id: String, // 当一个页面有多个密码输入框时,用id来区分
default: '1'
},
//结束
mounted () {
//支付框
this.ipt = document.querySelectorAll(`#ids_${this.id} .shortInput`)
},
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('getPwd', this.pwdList.join(''))
},
//支付框
changePwd () {
let index = this.pwdList.length
index === 6 && index--
this.ipt[index].focus()
},
//支付框
changeInput () {
let index = this.pwdList.length
let 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()
}
}
}
}
CSS
/* 支付框样式 */
.am_payPwd {
display: inline-block;
margin-left: 70px;
width: 300px;
height: 50px;
}
/* 支付框样式 */
.shortInput {
background: #cccccc;
border: 0;
text-align: center;
font-size: 20px;
float: left;
width: 40px;
height: 40px;
color: #333;
outline: #ff0067;
}
/* 支付框样式 */
.shortInput:not(:last-child) {
margin-right: 10px;
}
.spend-pay-button{
margin: 20px auto 20px 70px;
}
.spend-pay-1{
margin-top: 4%;
position: relative;
}
.spend-pay-2{
font-size: 14px;
font-weight:550;
display: inline-block;
position: absolute;
top:0;
}
.spend-pay-3{
margin-left: 70px;
display: inline-block;
font-size: 10px;
color: #cccccc;
}
.spend-pay-4{
margin-left: 85px;
display: inline-block;
font-size: 10px;
font-weight: 600;
}
/* 去支付按钮样式 */
.spend-pay-5 .el-button--medium {
padding: 10px 35px;
border-radius: 17px;
}
代码大概就是这样子了