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

这一段时间做小程序项目，使用的是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: 0;
          right: 0;
          width: 27px;
          height: 27px;
        }
      }
    }
  }
}