Vue2.X+element-UI实现发送验证码后按钮内倒计时

首先，组件中定义一个变量 countdown，用于存储倒计时的秒数，初始值为 59。

在按钮上添加一个点击事件，当按钮被点击后，启动倒计时。在这个点击事件中，需要设置定时器，每隔一秒钟将 countdown 的值减 1，直到 countdown 的值为零。同时，禁用按钮，以防止用户多次点击。

使用 Element UI 的按钮组件（el-button），将 countdown 的值绑定到按钮上。这样，用户就可以看到倒计时的效果。

确保倒计时数字变化时可以实时更新到视图上面，需要添加以哦个watch来监听倒计时数字的变化

示例代码：
template代码：

<template>
  <el-button :disabled="countdown > 0" @click="startCountdown">
    {{ countdown > 0 ? countdown + '秒' : '发送验证码' }}
  </el-button>
</template>

js代码：

<script>
export default {
  data() {
    return {
      countdown: 0,
      timer: null
    };
  },
  methods: {
    startCountdown() {
      this.countdown = 59;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  watch: {
       countdown: {
           handler(newVal) {
               this.countdown = newVal
           }
       }
   }
};
</script>