建站最好的公司排名,编辑网站用什么软件,网站被抄袭怎么投诉,指数基金怎么买才赚钱目录 基本使用
#自定义提示语
#保持倒计时
API
#Props
#Methods
#Event 基本使用
通过ref获取组件对象#xff0c;再执行后面的操作#xff0c;见下方示例。
通过seconds设置需要倒计的秒数(默认60)通过ref调用组件内部的start方法#xff0c;开始倒计时通过监听cha…
目录 基本使用
#自定义提示语
#保持倒计时
API
#Props
#Methods
#Event 基本使用
通过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;}
/style#自定义提示语
组件内部有内置的提示语如获取验证码前的提示语为获取验证码用户可以通过参数配置自定义的提示
获取前参数为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
API
#Props
参数说明类型默认值可选值seconds倒计时所需的秒数Number | String60-startText开始前的提示语见上方说明String获取验证码-changeText倒计时期间的提示语必须带有字母x见上方说明StringX秒重新获取-endText倒计结束的提示语见上方说明String重新获取-keepRunning是否在H5刷新或各端返回再进入时继续倒计时BooleanfalsetrueuniqueKey多个组件之间继续倒计时的区分key见上方说明String--
#Methods
需要通过ref获取验证码组件才能调用见上方基本使用说明
名称说明start开始倒计时reset结束当前正在进行中的倒计时设置组件为可以重新获取验证码的状态
#Event
事件名说明回调参数版本change倒计时期间每秒触发一次text: 当前剩余多少秒的状态见上方说明-start开始倒计时触发--end结束倒计时触发--
