fault ble left index 技術分享 簡單 rgb eat lean

從網上搜索了好多都很麻煩，花了點事件自己做了個，簡單輕便，老少皆宜

<template> <section class="pay-mask" @click="close_mask" v-show="payshow"> <div class="container"> <div class="pay_title">請輸入支付密碼 </div> <div class="flex f-d-r pay_content"> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> <div class="ipt_pay"> <input type="password" maxlength="1" disabled> </div> </div> </div> <footer> <ul class="pay_btn"> <li @click="btnpassword($event)">1</li> <li @click="btnpassword($event)">2</li> <li @click="btnpassword($event)">3</li> <li @click="btnpassword($event)">4</li> <li @click="btnpassword($event)">5</li> <li @click="btnpassword($event)">6</li> <li @click="btnpassword($event)">7</li> <li @click="btnpassword($event)">8</li> <li @click="btnpassword($event)">9</li> <li class="b9"></li> <li @click="btnpassword($event)">0</li> <li class="b9" @click="btndelete">刪除</li> </ul> </footer> </section> </template> <script> export default { props: { payshow: { type: Boolean, default: false } }, data() { return { index: -1 } }, created() {}, mounted() { $(".ipt_pay input:first").focus(); }, methods: { btnpassword(e) { var obj = e.currentTarget; var payinput = $(".ipt_pay input"); if (this.index < 5) { this.index++; $(payinput[this.index]).val($(obj).text()); } if (this.index == 5) { var pay_pwd = ‘‘; var payinput = $(".ipt_pay input"); for (var i = 0; i < payinput.length; i++) { pay_pwd += $(payinput[i]).val(); } console.log(pay_pwd); } }, btndelete() { var payinput = $(".ipt_pay input"); if (this.index >= 0) { $(payinput[this.index]).val(‘‘); this.index--; } }, close_mask() { this.payshow = false; } } } </script> <style scoped> img { width: 100%; height: 100%; } section { position: fixed; top: 0; width: 100%; height: 100%; z-index: 998; background: rgba(0, 0, 0, .6) } .container { position: absolute; top: 4rem; background: #fff; border-radius: 5px; margin: 0 .533333rem; padding-bottom: .266667rem; } .pay_title { position: relative; font-size: .48rem; text-align: center; color: #333; height: 1.333333rem; line-height: 1.333333rem; border-bottom: 1px solid #ddd; } .close { position: absolute; right: .2rem; top: .2rem; width: .72rem; height: .72rem; } .pay_content { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; margin: .533333rem .533333rem .333333rem .533333rem; } .ipt_pay { width: 100%; height: 1.333333rem; border-left: 1px solid #ddd; } .ipt_pay input { border: 0; height: 100%; width: 100%; text-align: center; font-size: .88rem; background: #fff; } footer { position: absolute; bottom: 0; width: 100%; font-weight: 600; } .pay_btn {} .pay_btn li { width: 33.3333%; float: left; height: 1.333333rem; line-height: 1.333333rem; text-align: center; background: #fff; font-size: .48rem; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .pay_btn li:active { background: #C2C2C2; } .b9:active { background: #fff !important; } .b9 { background: #C2C2C2 !important; } </style>

vue支付密碼