废话不多说,直接上代码。由于我的代码在虚拟机上写着不能复制粘贴,所以搬运一下本人参考其他博主的代码。稍微改动一下就能用了
<template>
<el-input size="small" placeholder="请输入验证码" v-model="phoneCode">
<el-button :disabled="disSend" size="small" slot="append" @click="send">{{BtnName}}</el-button>
</el-input>
</template>
<script>
export default {
data() {
return {
phoneCode: '',
BtnName: '发送验证码',
disSend:false
}
},
methods: {
send() {
this.disSend = true
this.$alert('已向***邮箱发送短信', '温馨提示', {
confirmButtonText: '确定',
callback: action => {
let count = 60;
let timer = null
if (!timer) {
timer = setInterval(() => {
if (count > 1) {
count--;
this.BtnName = count + '秒后重发'
} else {
clearInterval(timer);
timer = null;
this.disSend = false
this.BtnName = '发送验证码'
}
}, 1000)
}
}
});
}
}
}
</script>
本人的效果图如下
参考博主的链接放这里了:https://blog.youkuaiyun.com/weixin_41192489/article/details/106993107?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_utm_term-2&spm=1001.2101.3001.4242