vue 短信读秒，双向绑定使得写起来方法更加简便
1.首先在data里面三个变量
data () {
return{
content: '获取手机验证码', // 按钮里显示的内容
totalTime: 60, // 记录具体倒计时时间
canClick: true // 添加canClick
}
}
2.吧方法放到methods内
// 验证码读秒
setTime () {
if (!this.canClick) return // 如果是false 直接return出去
this.canClick = false
this.content = this.totalTime + 's后重新发送'
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 60
this.canClick = true // 这里重新开启
}
}, 1000)
}
3.在你写好的按钮上进行绑定
<input type="button"
:value="content"
:class="{disabled: !canClick}"
@click="getCode">
getCode这个点击事件就是调取验证码接口的方法，有两种选择：
那就是点击直接执行读秒，因为有些时候接口返回不能直接返回可能延迟1到2秒，
另一种是接口返回200并且调取成功的时候在开始执行读秒，具体随意了
后期我发一个公共组件的验证码 减少复用
如果对你有帮助请帮忙点赞，有问题可以联系更改
