由于項目的擴(kuò)展，新增了很多功能，今天談一下短信驗證碼框的實現(xiàn)。

思路：每個小方框其實就是單獨(dú)的每一個input標(biāo)簽（叫假input標(biāo)簽），每個長度為1，然后上面再寫一個大的input標(biāo)簽（叫真實input標(biāo)簽），提高層級定位在上方，最大長度為6，然后將上方真實input標(biāo)簽的值傳給每一個單獨(dú)的假input標(biāo)簽。

<div class="phonenum-show"><div class="getback-title">收回剩余禮金
<span @click="getbackMoneyclock()"><img src="../assets/getback.png" alt=""></span>
</div><div class="write-phonenum"><p>請輸入尾號<span>9909</span>的手機(jī)收到的短信驗證碼</p> <input type="tel" maxlength="6" class="realInput" v-model="realInput" @keyup="getNum()" @keydown="delNum()" id="focusid"><ul class="write-input clearfix"><li v-for="disInput in disInputs"><input type="tel" maxlength="1" v-model="disInput.value"></li></ul><mt-button size="large">我明白了 確認(rèn)提交</mt-button><p>剩余禮金將收回至微信“零錢包”請注意查收。</p><p style="color:#bfc0c0;">活動結(jié)束24小時后可申請收回剩余的禮金。</p></div> </div> .phonenum-show{padding:10px;background: #fff;} .getback-title{padding-bottom:10px;border-bottom: 1px solid #dddddd;position: relative;font-size: 14px;margin-bottom: 10px;} .getback-title span{position: absolute;right:0;top:3px;width:15px;height:15px;display: inline-block;} .write-phonenum p{text-align: center;font-size: 12px;} .write-phonenum p span{color: #3b90d1;} .write-input {border:1px solid #888888;width:186px;margin:10px auto;} .write-input li{float: left;width:30px;height: 30px;border-right:1px solid #ddd;} .write-input li input{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:0;width:30px;line-height: 30px;text-align: center;height: 30px;font-size:16px;} .write-input li:last-child{border-right: none;} .write-phonenum .mint-button--default{background: #3b90d1;color:#fff;font-family: "微軟雅黑";font-size: 14px;width:80%;margin:10px auto;} .realInput{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:0;z-index: 1;position: absolute;width:186px;height: 32px;line-height: 32px;background: none;display: block;left:50%;margin-left: -93px;top:76px;opacity: 0;font-size:0px;caret-color:#fff;color:#000;text-indent: -5em;} /*影藏input標(biāo)簽*/
input[type="tel" i]:disabled{background-color: #fff;} export default {name: 'packetMessage',data(){return{messagepacket:false,packets:[],disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],realInput:''}},methods:{getbackMoney(){this.messagepacket=true;var idObj = document.getElementById('focusid');idObj.focus();
//點(diǎn)擊進(jìn)來自動獲取焦點(diǎn)},getbackMoneyclock(){this.messagepacket=false},getNum(){for(var i=0;i<this.realInput.length;i++){this.disInputs[i].value=this.realInput.charAt(i)// 表示字符串中某個位置的數(shù)字，即字符在字符串中的下標(biāo)。}},delNum(){var oEvent = window.event; if (oEvent.keyCode == 8) { if(this.realInput.length>0){this.disInputs[this.realInput.length-1].value=''}}}},components: {} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/juewuzhe/p/7872382.html

總結(jié)

以上是生活随笔為你收集整理的vue,一路走来（14）--短信验证码框的实现（类似支付密码框）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。