原理很简单设置两个按钮用v-if判断是否展示 点击其中一个 把另一个变成false
直接上代码吧
<template>
<div>
<a-button @click="sendcode" v-if="issend">获取验证码</a-button>
<a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
</div>
</template>
<script>
export default {
data() {
return {
count: 30,
issend: true
};
},
methods: {
sendcode() {
const TIME_COUNT = 30;
if (!this.timer) {
this.count = TIME_COUNT;
this.issend = false;
//这里可以插入$axios调用后台接口
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.issend = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
}
}
};
</script>