uniapp 实现button倒计时禁用
小程序如何实现短信按钮倒计时，今天主要说一下uniapp 的实现，微信小程序，百度小程序的原生实现逻辑是一样的，只是代码稍微的改一下就可以了
小程序如何实现短信按钮倒计时，今天主要说一下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倒计时禁用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。
原创文章，作者：ECHO陈文，如若转载，请注明出处：https://www.luweipai.cn/html/1620697195/
相关推荐
-
深入理解position sticky 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）
-
vue3如何解决reactive()响应式对象初始化重新赋值
在 Vue 3 中，reactive 函数是 Composition API 的一部分，用于创建一个响应式对象。这意味着当你改变这个对象的属性时，任何依赖于这些属性的组件或计算属性都会自动更新。
-
满屏import优化方案之使用模块重导（Re-export）
在编写代码时，随着项目的扩大和功能的增加，我们往往会引入越来越多的外部库和模块，这就导致了import语句数量的激增。然而，过多的import语句不仅会使代码显得杂乱无章，还可能隐藏一些潜在的问题，如未使用的导入、导入顺序混乱等。
-
微信小程序封装公共弹窗dailog组件-UNIAPP篇
在小程序的开发过程中，会发现弹框这东西使用频率太高了，能不能封装一个公共组件呢~ 答案当然是能！！！ 开发思路借鉴了一下vant，有兴趣的同学可以，研究一下
