Vue：按钮倒计时N秒后可用

报名信息提交后弹出信息确认（为方便查看效果，注掉了数据校验），五秒后提交按钮方可点击提交信息。

 HTML：

<!--其他HTML结构-->

<!--点击申报(弹出层触发按钮)-->
<button class="robotBt" @click="robotEnter">点击申报</button>

<!--其他HTML结构-->


<!--报名信息确认-->
<div class="confirm" v-if="isConfirm">

<!--报名信息确认其他HTML结构-->

<div class="tc confirmBt">
<button class="confirmCancel" @click="confirmCancel">返回取消</button>
<button :class="[isConfirmTxt?'confirmEnter':'confirmCancel']"  @click="confirmEnter">确定提交 {{confirmTxt}}</button>
</div>
</div>

JS：

data(){
  return{
    isConfirm: false,//报名确认信息是否显示
    confirmTxt: 5,//倒计时时间5秒
    isConfirmTxt: false,//提交报名按钮是否可点击
    timer:null,//倒计时
  }
},
methods: {
  //点击申报弹窗及弹窗内按钮倒计时
  robotEnter() {    
    //其他代码或校验代码

    //更改弹窗显示状态
    this.isConfirm = true

    //提交报名按钮倒计时
    this.timer = setInterval(() =>{
      if (this.confirmTxt === 0) {
        this.confirmTxt = ""
        this.isConfirmTxt = true
        clearInterval(this.timer);
      }else{
        this.confirmTxt--
      }
    },1000);
  },
  
  //信息确认弹窗关闭
  confirmCancel() {
    this.isConfirm = false
  },

  //提交报名信息到数据库
  confirmEnter() {
    if (this.isConfirmTxt == false) {
      return false;
    }

    //其他代码 提交数据库
    
  }
},

Vue：关于setInterval() 方法和clearInterval() 方法https://blog.csdn.net/millia/article/details/106675713?spm=1001.2014.3001.5501