VUE：el-button里面的倒计时显示，验证码发送后两分钟倒计时

框架

UI：elementUI
前端：vue

需求

发送验证码后，2分钟内不可以在发送，button置灰，120s后可以点击重新发送验证码

样式图

代码

template部分

<el-button
          v-if="isSend === 1"
          :class="sendDisabled ? 'sendDisabledStyle' :'verificationScanCode-closeBtn'"
          :disabled="sendDisabled"
          @click="sendBtn"
          >{{ sendTimeTitle }}
          <span v-show="!showSendTime" class="count"
            >发送验证码({{ count }}s)span
          >el-button>

script部分

const TIME_COUNT = 120; // 更改倒计时时间（验证码）

data() {
    return {
	sendDisabled: true, // 默认倒计时的时候禁用发送
	sendTimeTitle: null // 验证码button的title名字
	showSendTime: true, // 启动倒计时
	count: "", // 初始化次数
	 };
  },

// 销毁前清除计时器
 beforeDestroy() {
    clearInterval(this.timer);
  },

methods: {
  // 发送验证码
    sendBtn() {
      this.sumitDisabled = true;
      // 调用发送验证码接口
      this.接口方法名字();
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.showSendTime = false;
        this.sendTimeTitle = "";
        this.sendDisabled = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showSendTime = true;
            clearInterval(this.timer); // 清除定时器
            this.count = TIME_COUNT;
            this.timer = null;
            this.sendTimeTitle = "发送验证码";
            this.sendDisabled = false; // 可以重新发送验证码
          }
        }, 1000);
      }
    },
}

style部分

具体样式要根据当前布局调整

.sendDisabledStyle {
      width: 127px;
      height: 32px;
      background-color: #ddd;
      // color: #57a3f3;
      color: #909399;
      cursor: not-allowed; // 鼠标变化
      line-height: 0px;
      padding: 2px;
    }
.verificationScanCode-closeBtn {
      width: 127px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #e6e9f0;
      line-height: 0px;
    }

部分内容解读

sendDisabled ：代表该button被禁用了，当它禁用和未禁用的时候有两种样式
sendDisabledStyle ：这是禁用的样式，就是灰色+120s倒计时的组合样式
verificationScanCode-closeBtn：这是未禁用的样式