vue+elementui 实现点击验证码出现60秒倒计时
div部分
<div class="verCode
@click="getVerCode"
:disabled="disable
<span>{{buttonName}}</span
</div>
js部分
<script>
new Vue({
el: "#app",
data: {
@*获取验证码*@
buttonName: "获取验证码",
count: 59,
disable: false,
……省略ruleForm验证
},
methods: {
@*获取手机验证码*@
getVerCode() {
console.log('*', this.ruleForm.phone.length)
if (this.ruleForm.phone == '') {
this.$message({
message: '手机号不能为空',
type: 'warning'
});
} else if (this.ruleForm.phone.length != 11) {
this.$message({
message: '请输入11位的手机号码',
type: 'warning'
});
} else {
@this.abc() abc方法是点击验证码接口*@
console.log('点击了', this.disable)
if (this.disable == true) {
this.$message({
message: '请勿重复点击',
type: 'warning'
});
} else {
var timeout = setInterval(() => {
if (this.count < 1) {
this.disable = false;
this.buttonName = "获取验证码";
this.count = 59;
clearInterval(timeout);
} else {
this.disable = true;
this.buttonName = this.count-- + "s后重发";
}
}, 1000);
}
}
},
},
})