支付密碼

• Vue版支付密碼代碼
• • 效果展示
  • HTML
  • Javascript
  • CSS

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

代碼大概就是這樣子了

總結

以上是生活随笔為你收集整理的Vue版支付密码（类似支付宝）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。