vue实现倒计时获取验证码

项目需求，做一个倒计时生成四位随机验证码，点击后禁止重复点击，倒计时结束后可以继续点击

话不多说，直接上代码

<template>
  <div>
    <button :disabled="isSend" @click="countDown">
      {{ codeName }}
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isSend: false, //禁用
      codeName: "发送验证码",
      totalTime: 10, //一般是60
      timer: "", //定时器
    };
  },
  methods: {
    // 验证码倒计时
    countDown() {
      if (this.isSend) return;
      // this.getCode() // 获取验证码的接口
      this.isSend = true;
      this.codeName = this.totalTime + "s后重新发送";
      //生成随机验证码
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;
      for (let i = 0; i < len; i++) {
        codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));
      }
      console.log(codeList.join(""));
      //   倒计时
      this.timer = setInterval(() => {
        this.totalTime--;
        this.codeName = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          clearInterval(this.timer);
          this.codeName = "重新发送验证码";
          this.totalTime = 10;
          this.isSend = false;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
</style>

生成一个随机的颜色

   // 生成一个随机的颜色
    randomColor() {
      const r = Math.floor(Math.random() * (255 - 0) + 0);
      const g = Math.floor(Math.random() * (255 - 0) + 0);
      const b = Math.floor(Math.random() * (255 - 0) + 0);
      console.log("rgb(" + r + "," + g + "," + b + ")");
    },