天天看点

uni-app 获取验证码倒计时60秒

效果图

uni-app 获取验证码倒计时60秒
uni-app 获取验证码倒计时60秒

1、先写html(相关样式自己写)

<view class="flex_row">
	<view class="iconfont iconyanzhengma"></view>
	<input type="text" v-model="verify" placeholder="请输入验证码" />
	<view v-if="verifyShow" style="width:240upx;" @click="verifyBtn()">获取验证码</view>
	<view v-else style="width:240upx;text-align: center;">{{verifyTip+'秒'}}</view>
</view>
           

2、js里写倒计时方法

timedown:function(num){
	let that = this;
	if(num == 0){
		that.verifyShow = true;				// 是否显示获取验证码
		return clearTimeout();
	}else{
		that.verifyShow = false;			// 是否显示获取验证码
		setTimeout(function() {  
			that.verifyTip = num-1
			that.timedown(num-1);  
		}, 1000);//定时每秒减一  
	}
},
           

3、调用方法(相关判断自己写)

mounted(){
	this.timedown(that.verifyTip) 			// this.timedown(60)
},