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

以下是json代码

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

以下是wxml代码

<van-popup show="{{ show }}" bind:close="onClose"   custom-class="extract">
  <image  src="../../images/extract/icon1.png" mode=""/>
  <view class="title">请输入验证码</view>
  <view class="ys-verification">
    <view class="input-wrapper" wx:for="{{amount}}" wx:key="index">
      <input type="number" value="{{code[index]}}" data-index="{{item}}" title="code" focus="{{item == currentIndex}}" maxlength="1" data-index="{{index}}" bindinput='handleInput'/>
    </view>
  </view>
  <view class="tips">
    请输入验证码
  </view>
  <view class="btn">提交</view>
</van-popup>

以下是css代码

.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;
}
.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: relative;
}
.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:1,
    code:[],
    currentIndex:0,
    amount:4
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onClose(e){
this.setData({
  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() {

  }
})

原文地址：https://blog.csdn.net/qq_37547964/article/details/144383228

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！