uni验证码自动回填input框中

1.html 

 <uni-dialog 
    :show.sync="open" 
        :showHeader="false"
    mask>
    <view class="confirm-dialog">
            输入提现手机验证码
      <view class="confirm-header">
        <view class="title">
                    <view class="takeMoney">提现金额</view>
                    ￥{{title}}
                </view>
        <view class="sub-tit" v-if="message">{{message}}</view>
        <!-- <view class="sub-tit">
          <slot name="sub-tit"></slot>
        </view> -->
      </view>
      <view class="confirm-input" v-if="showInput">
                <view class="confirm-input mt30">
                    <view 
                        @tap="focusInput(index)"
                        class="mock-input" 
                        v-for="(item, index) in inputNumber" 
                        :key="index">
                        <view class="mock-input-item">{{smsCode[index] || ''}}</view>
                        <view :class="['focus', {show: focusIndex == index}]"></view>
                    </view>
                    <input
                        class="input" 
                        type="number"
                        :focus="focus"
                        @blur="focusIndex=-1"
                        @focus="focusInput"
                        v-model="smsCode" 
                        maxlength="4" />
                </view>
      </view>
      <view class="dialog-footer">
        <button
          class="button primary-button button-shadow" 
          @tap="confirm">确认</button>
        <button class="button default-button"  @tap="cancel">取消</button>
      </view>
    </view>
  </uni-dialog>  

2.js

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

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;
            + .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;
        }
    }