支付密码
Vue版支付密码代码效果展示HTMLJavascriptCSSVue版支付密码代码
效果展示
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.lengthif (!index) returnif (ev.keyCode === 8) {this.isDelete = trueif (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 = falsethis.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.lengthindex === 6 && index--this.ipt[index].focus()},//支付框changeInput () {let index = this.pwdList.lengthlet 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;}
代码大概就是这样子了
