vue中的部分代码
<el-button :disabled="!show" @click="AcquireValidation(addUserSignal.phone, 'registForm')">
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
</el-button>
js中的代码
<script>
const TIME_COUNT = 60 // 倒计时的时间
export default {
data() {
return {
show: true,
count: '',
timer: null
},
methods: {
AcquireValidation (registForm){
if (!this.timer) {
console.log(this.timer)
this.count = TIME_COUNT
this.show = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.show = true
clearInterval(this.timer)
this.timer = null
}
}, 1000)
}
}
}
}
</script>









网友评论