vue element-ui实现获取短信验证码 ,60秒倒计时及页面

在Vue中使用Element UI实现获取短信验证码的功能，可以通过以下步骤实现：

1. 创建Vue组件。
2. 使用Element UI的el-button组件来触发获取短信验证码的操作。
3. 在Vue实例的data对象中设置一个变量来记录倒计时的秒数。
4. 实现一个方法，当按钮被点击时开始倒计时。
5. 使用setInterval方法来更新倒计时的秒数，并在倒计时结束时清除定时器。
6. 在页面上显示倒计时的秒数。

以下是实现该功能的示例代码：

<template>
  <div>
    <el-button :disabled="countdown > 0" @click="getSmsCode">
      {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取短信验证码' }}
    </el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      countdown: 0, // 倒计时的秒数
      intervalId: null // 存储定时器的ID
    };
  },
  methods: {
    getSmsCode() {
      // 这里应该是发送获取短信验证码的请求
      // 获取成功后开始倒计时
      this.startCountdown();
    },
    startCountdown() {
      this.countdown = 60; // 设置倒计时的总时间
      this.intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(this.intervalId); // 倒计时结束，清除定时器
        }
      }, 1000);
    }
  }
};
</script>

在这个例子中，当按钮被点击时，会调用getSmsCode方法。如果countdown大于0，即正在倒计时，按钮将被禁用。倒计时结束后，按钮将重新启用，并可以再次触发获取短信验证码的操作。