vue,一路走來（14）--短信驗證碼框的實現（相似支付密碼框）

因爲項目的擴展，新增了不少功能，今天談一下短信驗證碼框的實現。

思路：每一個小方框其實就是單獨的每個input標籤（叫假input標籤），每一個長度爲1，而後上面再寫一個大的input標籤（叫真實input標籤），提升層級定位在上方，最大長度爲6，而後將上方真實input標籤的值傳給每個單獨的假input標籤。

<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>的手機收到的短信驗證碼</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">我明白了 確認提交</mt-button>
        <p>剩餘禮金將收回至微信「零錢包」請注意查收。</p>
        <p style="color:#bfc0c0;">活動結束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標籤*/
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(); 
          //點擊進來自動獲取焦點
        },
        getbackMoneyclock(){
          this.messagepacket=false
        },
        getNum(){ for(var i=0;i<this.realInput.length;i++){
             this.disInputs[i].value=this.realInput.charAt(i)
             // 表示字符串中某個位置的數字，即字符在字符串中的下標。
          }
        },
        delNum(){
          var oEvent = window.event; 
          if (oEvent.keyCode == 8) { 
            if(this.realInput.length>0){
             this.disInputs[this.realInput.length-1].value='' } } }
    },
    components: {} 
}