uni验证码自动回填input框中

1.html 

      :show.sync&＃61;"open" 
        :showHeader&＃61;"false"
    mask>
   
            输入提现手机验证码
     
       
                    提现金额
                    &＃xffe5;{{title}}
                
        {{message}}
       
     
     
                
                                             &＃64;tap&＃61;"focusInput(index)"
                        class&＃61;"mock-input" 
                        v-for&＃61;"(item, index) in inputNumber" 
                        :key&＃61;"index">
                        {{smsCode[index] || &＃39;&＃39;}}
                        
                    
                                             class&＃61;"input" 
                        type&＃61;"number"
                        :focus&＃61;"focus"
                        &＃64;blur&＃61;"focusIndex&＃61;-1"
                        &＃64;focus&＃61;"focusInput"
                        v-model&＃61;"smsCode" 
                        maxlength&＃61;"4" />
                
     
     
                  class&＃61;"button primary-button button-shadow" 
          &＃64;tap&＃61;"confirm">确认
        取消
     
   
   

2.js

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: String,
    message: String,
    showInput: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
            smsCode: &＃39;&＃39;,
            inputNumber: [1, 2, 3, 4],
            focusIndex: -1,
            focus: false,        
    }
  },
  computed: {
    open: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit(&＃39;update:show&＃39;, val)
      }
    }
  },
  watch: {
     // 监听验证码的输入框
      smsCode() {
          this.focusIndex &＃61; this.smsCode.length
            console.log(this.focusIndex,this.smsCode.length)
    }    
  },
    updated() {
        // console.log(this.inputNumber,this.smsCode)
    },
    methods: {
        focusInput(index) {
            this.focus &＃61; true
            this.focusIndex &＃61; this.smsCode.length
        },
        confirm() {
          if(this.showInput) {
                if(this.smsCode.length <4) {
                    this.smsCode&＃61;&＃39;&＃39;
                    return this.$showTip(&＃39;请输入完整的验证码&＃xff01;&＃39;)
                }else{
                    this.$emit(&＃39;confirm&＃39;, this.smsCode)
                    console.log(&＃39;confirm&＃39;,this.smsCode)
                    return
                }
          }
          this.$emit(&＃39;confirm&＃39;)
        },
        cancel() {
            this.smsCode&＃61;&＃39;&＃39;
          this.open &＃61; false
          this.$emit(&＃39;cancel&＃39;)
        },
  }
}

3.样式css

    .confirm-input {
        position: relative;
        width: 100%;
        text-align: center;
        .mock-input {
            position: relative;
            display: inline-block;
            width: 82rpx;
            height: 82rpx;
            line-height: 82rpx;
            border: 2rpx solid #F2F2F2;
            border-radius: 10rpx;
            text-align: center;
            font-size: 30rpx;
            color: #757575;
            &＃43; .mock-input {
                margin-left: 18rpx;
            }
            &-item {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .focus {
                display: none;
                position: absolute;
                left: 20rpx;
                top: 50%;
                width: 4rpx;
                height: 38rpx;
                margin-top: -19rpx; 
                background: #7BC20D;
                border-radius: 2rpx;
                &.show {
                    display: block;
                }
            }
        }
        .input {
            position: absolute;
            left: -100vw;
            top: 0;
            width: 400vw;
            height: 100%;
            opacity: 0;
        }
    }