微信小程序 - 实现验证码组件

前言

之前用vue写过一篇验证码组件的文章，现在用微信小程序实现。

布局

和vue中的布局相同，换成小程序的写法：

  <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" bindinput='handleInput'/></view></view>

样式

/* components/VerificationCodeInput/verificationCodeInput.wxss */.ys-verification {width: 100%;height: 80px;display: flex;justify-content: space-around;
}.ys-verification .input-wrapper {border-bottom: 1px solid #d6d6d6;width: 15%;height: 0;padding-bottom: 20%;position: relative;
}.ys-verification input {position: absolute;width: 100%;height: 100%;text-align: center;transition: all 0.3s;font-size: 7vw;color: #333;
}.ys-verification input:focus {border-bottom: 1px solid #666;
}

聚焦

利用input的focus属性绑定data中的currentIndex变量，可以实现input随输入的进行而移动的效果。

删除

利用data中储存的code值与输入的值相比较判断是否有删除操作，但是这样的缺点是：没办法在当前输入框为空的情况下判断是否进行了删除操作。

组件method

 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, '')},}

微信小程序 - 实现验证码组件相关推荐

微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...

微信小程序 - 实现验证码组件

前言

布局

样式

聚焦

删除

组件method

微信小程序 - 实现验证码组件相关推荐

最新文章

热门文章