60秒倒计时

<template>

  <div>

      <button class="button" @click="countDown">

 {{content}}

</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      content: "发送验证码",

      totalTime: 60,

      canClick: true, //添加canClick

    };

  },

  methods: {

    countDown() {

      if (!this.canClick) return; //改动的是这两行代码

      this.canClick = false;

      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 = 10;

          this.canClick = true; //这里重新开启

        }

      }, 1000)

    }

  }

}

</script>

<style>

.disabled {

  background-color: #ddd;

  border-color: #ddd;

  color: #57a3f3;

  cursor: not-allowed;

}

</style>