微信小程序-----自定义验证码实现

这一段时间做小程序项目，使用的是mpvue的框架，需要自己实现验证码输入，模拟input的光标，上一个框输入后后一个框自动获取焦点，删除时从后往前依次删除。下图是整体效果：

 <template>
   <div class="validate-code">
     <h3>验证码已发送至</h3>
     <div class="middle">
       <div class="tel">{{telPhone}}</div>
       <div class="right">
         <div class="timer" v-if="timer">({{count}}s)</div>
         <div class="txt-btn" v-else @click="getCode">重新获取验证码</div>
       </div>
     </div>
     <div class="code-wrap">
       <input type="number"
              placeholder="输入短信验证码"
              :maxlength="6"
              placeholder-style="color: #ccc;"
              @focus="handleFocus"
              @blur="handleBlur"
              v-model="validateCode">
       <div class="front-wrap" @click="getFocus">
         <div class="block">
           <i :class="{'active': validateCode.length === 0 && hasFocused}"></i>
           {{validateArray[0]}}
         </div>
         <div class="block">
           <i :class="{'active': validateCode.length === 1 && hasFocused}"></i>
           {{validateArray[1]}}
         </div>
         <div class="block">
           <i :class="{'active': validateCode.length === 2 && hasFocused}"></i>
           {{validateArray[2]}}
         </div>
         <div class="block">
           <i :class="{'active': validateCode.length === 3 && hasFocused}"></i>
           {{validateArray[3]}}
         </div>
         <div class="block">
           <i :class="{'active': validateCode.length === 4 && hasFocused}"></i>
           {{validateArray[4]}}
         </div>
         <div class="block">
           <i :class="{'active': validateCode.length === 5 && hasFocused}"></i>
           {{validateArray[5]}}
         </div>
       </div>
       <div class="tips" v-if="errMsg">{{errMsg}}</div>
     </div>
     <div class="btn" :class="{'effective': validateCode.length === 6}" @click="bindPhone">登录</div>
   </div>
 </template>

 <script>
   import fly from '@/http/config'

   export default {
     components: {},
     data () {
       return {
         telPhone: '',
         validateCode: '',
         errMsg: '',
         count: 60,
         timer: null,
         hasFocused: false
       }
     },
     computed: {
       validateArray () {
         return Array.from(this.validateCode);
       }
     },
     onShow () {
       this.errMsg = '';
       this.validateCode = '';
     },
     onReady () {
       this.telPhone = this.$root.$mp.query.telPhone;
       this.initTimer();
     },
     created () {
       //
     },
     methods: {
       handleFocus () {
         this.hasFocused = true;
         this.errMsg = '';
       },
       handleBlur() {
         this.hasFocused = false;
       },

       getCode () {
         if (!this.timer) {
           this.getBindingVerifyCode()
         }
       },
       getBindingVerifyCode () {
         let _this = this
         fly.get('/2c/*********/*******', {
           phoneNum: this.telPhone
         }).then((data) => {
           wx.showToast({
             title: data.message
           })
           _this.initTimer()
         }, err => {
           console.log(err)
         })
       },
       bindPhone () {
         let _this = this;
         if (this.validateArray.length < 6) {
           return
         }
         fly.get('/2c/*****/*******', {
           phoneNum: this.telPhone,
           verifyCode: this.validateCode
         }).then((data) => {
           wx.showToast({
             title: data.message
           })
           wx.setStorage({
             key: 'phoneNum',
             data: _this.telPhone
           });
           setTimeout(() => {
             wx.reLaunch({
               url: '/pages/index/main'
             });
           }, 1000);
         }, err => {
           console.log(err);
           _this.errMsg = err.message;
           wx.showToast({
             icon: 'none',
             title: err.message
           });
         })
       },
       initTimer () {
         let _this = this
         this.timer = setInterval(() => {
           if (_this.count <= 0) {
             _this.count = 60
             clearInterval(_this.timer)
             _this.timer = null
           }
           _this.$set({
             'count': _this.count
           })
           _this.count--
         }, 1000)
       }
     }
   }
 </script>

 <style lang="scss" src="./index.scss">

 </style>

CSS文件

 .profile{
   width: 100%;
   height: 100%;
   background: #f6f6f6;
   .get-user-info {
     width: 200px;
     height: 50px;
   }
   .herder{
     padding: 25px 10px;
     background: #f25252;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     .avatar-wrap{
       width: 60px;
       height: 60px;
       overflow: hidden;
       border-radius: 50%;
       img{
         width: 60px;
         height: 60px;
       }
     }
     .user-info{
       color: #fff;
       margin-left: 10px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       h5{
         font-size: 16px;
         line-height: 16px;
         margin-bottom: 10px;
       }
       p{
         text-indent: 13px;
         font-size: 14px;
         line-height: 14px;
         background: url("../../assets/images/profile/icon_phone.png") 0 50%/9px 14px no-repeat;
       }
     }
   }
   .content{
     .main{
       margin: 10px 0;
       .content-item{
         height: 50px;
         padding: 0 10px;
         display: flex;
         background: #fff;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #f6f6f6;
         .left{
           display: flex;
           align-items: center;
           img{
             width: 15px;
             height: 15px;
             margin-right: 9px;
           }
           .title{
             font-size: 15px;
             color: #333;
           }
         }
         .arrow{
           display: flex;
           justify-content: center;
           align-items: center;
           .phone{
             font-size: 15px;
             color: #399fda;
             margin-right: 8px;
           }
           img{
             width: 6px;
             height: 9px;
           }
         }
       }
     }
     .card-wrap{
       background: #fff;
       padding: 12px 10px;
       .card{
         height: 50px;
         border-radius: 4px;
         background: #ffdc69;
         display: flex;
         justify-content: space-between;
         align-items: center;
         position: relative;
         .left{
           span{
             font-size: 15px;
             color: #884600;
             line-height: 50px;
           }
           img{
             width: 34px;
             height: 31px;
             margin: 0 5px 0 10px;
             vertical-align: middle;
           }
         }
         .arrow{
           display: flex;
           justify-content: flex-start;
           align-items: center;
           img{
             width: 4px;
             height: 6px;
             margin: 0 10px 0 3px;
           }
           span{
             font-size: 13px;
             color: #884600;
           }
         }
         .icon-fixed{
           position: absolute;
           top:;
           right:;
           width: 27px;
           height: 27px;
         }
       }
     }
   }
 }