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

以下是json代码

bash 复制代码
{
  "component": true,
  "usingComponents": {}
}

以下是wxml代码

bash 复制代码
<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代码

bash 复制代码
.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逻辑代码

bash 复制代码
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() {

  }
})
相关推荐
2501_9159184119 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063219 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん1 天前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013741 天前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918411 天前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩1 天前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程1 天前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918412 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520862 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app