vant组件 弹窗确认按钮设置倒计时5s完成后才能点击

  <template>
  <div>
  <van-dialog
        v-model="isDialogShow"
        title="发信息确认"
        :showConfirmButton = "showConfirmButton"
        @cancel="isDialogShow = false"
    >
    <div style="padding: 2vh">  请确认您本次的信息输入是否正确，保存后将无法修改。</div>
      <template>
        <van-button  style="margin:2vh 10%; width: 80%"
                     color="#26b0f4"
                     size="normal"
                     round
                     native-type="submit" :disabled="countdown > 0" @click="onConfirm">
          {{spanContent}}
        </van-button>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showConfirmButton:false,
      isDialogShow: false,
      countdown: 5, // 倒计时秒数
      timer: null, // 计时器
      spanContent:'我已知晓'
}
},
  watch: {
    count(val){
      console.log('count的值',val)
    },
    'isDialogShow': {
      deep:true,
      handler(val){
       if(val === true) {
         this.startCountdown()
       }
      }
      }
  },
 methods: {
   onConfirm() {
      console.log('确认')
      this.isDialogShow = false
      this.countdown = 5
    },
    startCountdown() {
      this.timer = setInterval(() => {
        this.spanContent = `我已知晓(${this.countdown})s`
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else if (this.countdown === 0) {
          this.spanContent = '我已知晓'
          this.clearCountdown();
        }
      }, 1000);
    },
    clearCountdown() {
      clearInterval(this.timer);
      this.timer = null;
    },
}



}
</script>