简单的倒计时按钮

<template>
  <div>
    <button class="btn" :class="{disabled: !this.canClick}" @click="countDown">{{content}}</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data(){
    return {
      content:'发送验证码',//按钮中显示得内容
      totalTime:5,//记录具体倒计时时间
      canClick:true //添加canClick
    }
  },
  methods:{
    countDown(){
      if(!this.canClick) return //节流
      this.canClick = false //jieliu
      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 = 5
          this.canClick = true //这里重新开始
        }
      },1000)
    }
  }
}
</script>

<style>
.btn{
background-color:skyblue;
}
.disabled{
  background-color: #ddd;
  border-color: #ddd;
  color: #57a3f3;
  cursor: not-allowed; 
  /* 鼠标变化(鼠标悬停禁用样式) */
}
</style>