微信小程序实现联动删除输入验证码框

以下是json代码

{
  "component": true,
  "usingComponents": {}
}

以下是wxml代码

<view class="  pf">
  
<van-popup show="{{show}}" bind:close="onClose"  z-index="999" root-portal   custom-class="extract">
  <image  bind:tap="onClose" src="../../images/extract/icon1.png" mode=""/>
  <view class="title">请输入提取码</view>
  <view class="ys-verification">
    <input class="pfinpuit"  type="number" value="{{value}}" bindinput='onchangeinput' maxlength="{{amount}}"  bindfocus="showKeyboard" bindblur="hideKeyboard"/>
    <view class="input-wrapper" wx:for="{{amount}}" wx:key="index">
      <input type="number" value="{{code[index]}}" data-index="{{item}}" title="code" maxlength="1" data-index="{{index}}" />
    </view>
  </view>
  <view class="tips">
    请联系销售老师获取提取码
  </view>
  <view class="btn" bind:tap="getfile">提交</view>
 </van-popup>  

</view>
  

以下是css代码

/* components/VerificationCodeInput/verificationCodeInput.wxss */
.pf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  overflow: hidden;
}
.pfinpuit {
  position: absolute !important;
  box-sizing: border-box;
  width: 100% !important;
  padding-left: 100%;
  overflow: hidden;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 7;
  background: transparent !important;
  color: transparent !important;
  caret-color: transparent !important;
}
.ys-verification {
  width: 100% ;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  margin-top: 34rpx;
  padding-top: 48rpx;
  margin-bottom: 24rpx;
  border-top: 2rpx solid #FFFFFF;
  position: relative;
}
.ys-verification .input-wrapper {
  width: 102rpx;
  height: 100rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  position: relative;
}
.ys-verification input {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 50rpx;
  color: #333;
  background: #fff;
}
.extract {
  width: 622rpx;
  height: 490rpx;
  background: linear-gradient(135deg, #E1FFFB 0%, #FFE6E6 100%);
  border-radius: 8rpx;
  padding: 32rpx;
  position: absolute;
}
.extract > image {
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  top: 36rpx;
  right: 36rpx;
}
.extract .title {
  font-size: 32rpx;
  color: #41475B;
  text-align: center;
}
.extract .tips {
  font-size: 28rpx;
  color: #41475B;
  text-align: center;
}
.extract .btn {
  width: 304rpx;
  height: 84rpx;
  text-align: center;
  line-height: 84rpx;
  background: #05C8AF;
  border-radius: 12rpx ;
  font-size: 28rpx;
  color: #FFFFFF;
  margin: 48rpx auto 0;
}

以下是js逻辑代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {


  },

  /**
   * 组件的初始数据
   */
  data: {
    show: 0,
    code: [],
    currentIndex: 0,
    amount: 4,
    url: null,
    value: ''
  },
  /**
   * 组件的方法列表
   */
  methods: {
    showKeyboard() {
      wx.showKeyboard()
    },
    hideKeyboard() {
      wx.hideKeyboard()
    },
    onchangeinput(e) {
      this.setData({
        value: e.detail.value,
        code: String(e.detail.value).split('')
      })

    },
    seturl(url) {
      this.setData({
        code: [],
        show: 1,
        url: url
      })
    },
    getfile() {
      if (this.data.code.join('').length == 0) {
        wx.showToast({
          icon: 'none',
          title: '请输入提取码'
        })
        return
      }
      if (this.data.code.join('').length != 4) {
        wx.showToast({
          icon: 'none',
          title: '请输入完整提取码'
        })
        return
      }
      if (this.data.code.join('') != '6666') {
        wx.showToast({
          icon: 'none',
          title: '请输入正确的提取码'
        })
        return
      }
  
      this.onClose()
    },
    onClose(e) {
      this.setData({
        code: [],
        value: '',
        show: 0
      });
    },
    handleInput(e) {
      let value = this.validateNumber(e.detail.value);
      let index = e.currentTarget.dataset.index;
      const oldValue = this.data.code[index];
      if (value !== '') {
        let code = this.data.code;
        code[index] = value;
        this.setData({
          code,
          currentIndex: ++index
        });
        if (!code.includes('')) {
          this.triggerEvent('onCompleted', {
            code: code.join('')
          }, {
            bubbles: true,
            composed: true
          })
        }
      } else {
        const isDeleted = oldValue !== ''; // 但是无法监听当value为''的情况，因为不会触发input事件-->
        let code = this.data.code;
        code[index] = '';
        this.setData({
          code,
          currentIndex: isDeleted ? --index : index
        })
      }
    },
    validateNumber(val) {
      return val.replace(/\D/g, '')
    },
  },
  attached() {

  }
})