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

以下是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() {}
})