阿里巴巴自助建站的一般流程,上海市人才网官网,定西网站建设,今天东莞封路考虑到用户实际发送验证码的场景#xff0c;可能是一个按钮#xff0c;也可能是一段文字#xff0c;提示语各有不同#xff0c;所以本组件 不提供界面显示#xff0c;只提供提示语#xff0c;由用户将提示语嵌入到具体的场景
#平台差异说明
App#xff08;vue#xf…考虑到用户实际发送验证码的场景可能是一个按钮也可能是一段文字提示语各有不同所以本组件 不提供界面显示只提供提示语由用户将提示语嵌入到具体的场景
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过ref获取组件对象再执行后面的操作见下方示例。
通过seconds设置需要倒计的秒数(默认60)通过ref调用组件内部的start方法开始倒计时通过监听change事件(从开始到结束之间每秒触发一次)获得提示的文字可能值如获取验证码|12秒后重新获取|重新获取可以自定义
注意用户可能在倒计时的过程中点击获取验证码的按钮组件内部提供了通过ref获取的canGetCode变量在倒计时 过程中该值为false如果为false应该给予提示并不要再次向后端请求验证码如果为true则为获取验证码 之前或者倒计结束之后可以再次向后端请求验证码。
以下为完整示例见如下
templateview classwrapu-toast refuToast/u-toastu-code :secondsseconds endend startstart refuCode changecodeChange/u-codeu-button tapgetCode{{tips}}/u-button/view
/templatescriptexport default {data() {return {tips: ,// refCode: null,seconds: 10,}},onReady() {// 注意这里不能将一个组件赋值给data的一个变量否则在微信小程序会// 造成循环引用而报错如果你想这样做请在非data中定义refCode变量// this.refCode this.$refs.uCode;},methods: {codeChange(text) {this.tips text;},getCode() {if(this.$refs.uCode.canGetCode) {// 模拟向后端请求验证码uni.showLoading({title: 正在获取验证码})setTimeout(() {uni.hideLoading();// 这里此提示会被this.start()方法中的提示覆盖uni.$u.toast(验证码已发送);// 通知验证码组件内部开始倒计时this.$refs.uCode.start();}, 2000);} else {uni.$u.toast(倒计时结束后再发送);}},end() {uni.$u.toast(倒计时结束);},start() {uni.$u.toast(倒计时开始);}}}
/scriptstyle langscss.wrap {padding: 24rpx;}
/stylecopy
#自定义提示语
组件内部有内置的提示语如获取验证码前的提示语为获取验证码用户可以通过参数配置自定义的提示
获取前参数为start-text默认值为获取验证码倒计时期间参数为change-text默认为X秒重新获取这里的x(大小写均可)将会被倒计的秒数替代倒计时结束参数为end-text默认值为重新获取
#保持倒计时
一般情况下在H5刷新浏览器或者各端返回再进入时倒计时会消失导致用户可以再次尝试获取验证码虽然后端还会对此进行进一步的判断。 对于这种情况uView给出了一个keep-running参数(默认为false)为true的时候即使刷新浏览器或者返回上一个页面 倒计时依然会继续(如果还在倒计时间内的话)。
注意 如果您的一个页面或者多个页面同时使用了多个此组件为了防止多个组件之间保存在本地的多个继续倒计时的变量之间互相干扰可以配置 各个组件的unique-key为一个不重复的字符串以作区分
/* A.vue */
u-verification-code unique-keypage-a/u-verification-code/* B.vue */
u-verification-code unique-keypage-b/u-verification-code
