vue中el-button实现获取验证码倒计时功能

在Vue中，要实现`el-button`按钮的获取验证码倒计时功能，通常会结合`v-bind:class`、`v-show`指令以及`setTimeout`函数来动态控制显示状态。下面是一个简单的示例：

<template>
  <div>
    <el-button :class="{'disabled': countdown <= 0}" @click="getVcode" v-text="countdown">获取验证码</el-button>
    <span v-show="showCountdown">{{ countDownText }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 60, // 验证码有效时间为60秒
      showCountdown: false,
      countDownText: '剩余时间{{ countdown }}秒',
    };
  },
  methods: {
    getVcode() {
      this.countdown--;
      if (this.countdown > 0) {
        this.showCountdown = true;
      } else {
        this.showCountdown = false;
        this.countdown = 60; // 验证码过期后恢复到初始值
      }
      setTimeout(() => {
        this.getVcode(); // 每秒更新倒计时
      }, 1000);
    },
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearTimeout(this.timeoutId); // 确保销毁时清除定时器
  },
};
</script>

<style scoped>
.disabled {
  cursor: not-allowed;
}
</style>

在这个例子中，当用户点击按钮时，`getVcode`方法会被调用，开始倒计时。每秒通过`setTimeout`递归调用自身，减小`countdown`值。同时，`v-bind:class`用于给按钮添加禁用样式，`v-show`用于显示倒计时提示。