uniapp封装一个获取验证码倒计时(GTP侠)
function getVerifyCode(vm, time, btnText = "获取验证码") {vm.verifyCodeText = `${count}秒后重新获取`;* @param {String} btnText 按钮文本(默认为"获取验证码")vm.verifyCodeText = `${count}秒后重新获取`;- `btnText`:按钮文本,默认为"获取验证码"。- `
可以封装一个获取验证码倒计时的方法,示例如下:
```javascript
/**
* 获取验证码倒计时
* @param {Object} vm vue实例对象
* @param {Number} time 倒计时时长(单位:秒)
* @param {String} btnText 按钮文本(默认为"获取验证码")
*/
function getVerifyCode(vm, time, btnText = "获取验证码") {
let timer = null;
let count = time;
vm.verifyCodeText = `${count}秒后重新获取`;
vm.verifyCodeDisabled = true;
timer = setInterval(() => {
count--;
if (count <= 0) {
clearInterval(timer);
vm.verifyCodeText = btnText;
vm.verifyCodeDisabled = false;
} else {
vm.verifyCodeText = `${count}秒后重新获取`;
}
}, 1000);
}
```
这个方法接受三个参数:
- `vm`:vue实例对象,用于修改页面上的数据;
- `time`:倒计时时长,单位为秒;
- `btnText`:按钮文本,默认为"获取验证码"。
使用方法示例如下:
```javascript
// 在vue组件中使用示例:
export default {
data() {
return {
verifyCodeText: "获取验证码",
verifyCodeDisabled: false
};
},
methods: {
handleGetVerifyCode() {
// 调用获取验证码接口,等待接口返回结果
// 如果接口返回成功,则开始倒计时
getVerifyCode(this, 60);
}
}
};
```
这样就可以在页面上实现获取验证码倒计时的效果了。
更多推荐
所有评论(0)