ECHO陈文
关注互联网技术开发与维护运营

uniapp 实现button倒计时禁用

小程序如何实现短信按钮倒计时,今天主要说一下uniapp 的实现,微信小程序,百度小程序的原生实现逻辑是一样的,只是代码稍微的改一下就可以了

view

<button type="primary" @click="getTextCode" :disabled="disabled">{{captchaText}}</button>

js

export default {
data() {
return {
	disabled: false,
	time: 0,
	captchaText: '获取验证码',
       }
},
methods: {
//发送验证码
getTextCode() {
	var that = this;
	var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
	var dataMobile = this.mobile;
	if (dataMobile == '') {
		uni.showToast({
			title: '请输入您的联系方式',
			duration: 2000,
			icon: 'none'
		});
		return false;
	}
        if (!myreg.test(dataMobile)) {
		uni.showToast({
		        title: '联系方式格式不正确',
		        duration: 2000,
		        icon: 'none'
		});
		return false;
	}
        //此处可以写上自己的接口逻辑
	//这块可以修改倒计时时间 我写的是60秒
	that.time = 60;
	const fn = setInterval(function() {
		that.time--
		that.captchaText = that.time + 's';
		that.disabled = true;
		if (that.time == 0) {
			clearInterval(fn)
			that.disabled = false;
			that.captchaText = '获取验证码';
		}
	}, 1000);
},

以上这篇uniapp 实现button倒计时禁用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。

赞(3) 打赏
未经允许不得转载:芦苇派 » uniapp 实现button倒计时禁用
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏