element-ui 如何在input上做一个发送验证码并且实现60秒倒计时？

要在Element UI的`<el-input>`上实现发送验证码并实现60秒倒计时，你可以结合Vue.js的数据绑定和计时器来实现。以下是一个简单的vue单文件组件示例代码：

<template>
  <div>
    <el-input v-model="phone" placeholder="请输入手机号码"></el-input>
    <el-button @click="sendCode" :disabled="isSending || countdown > 0">
      {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      isSending: false,
      countdown: 0,
    };
  },
  methods: {
    sendCode() {
      if (this.countdown > 0 || this.isSending) {
        return; // 防止重复点击发送
      }

      // 假设在这个方法中实现发送验证码的逻辑
      // 可以调用sendVerificationCode()方法发送验证码
      // 这里只是简单模拟发送过程
      this.isSending = true;
      this.startCountdown();

      setTimeout(() => {
        // 假设发送成功后将isSending重置为false
        this.isSending = false;
      }, 2000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
    },
    startCountdown() {
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>

在上述示例中，我们使用`isSending`来控制按钮是否禁用以及显示文本。当用户点击发送按钮后，`sendCode`方法会先检查`countdown`是否大于0，以及`isSending`是否为true。如果`countdown`大于0或`isSending`为true，则不执行发送验证码的逻辑，防止用户重复点击发送。然后，开始发送验证码并启动倒计时。

`startCountdown`方法用来启动60秒倒计时，它使用`setInterval`来每隔1秒更新`countdown`的值，并在倒计时结束后清除计时器。

这样，当用户点击发送按钮后，按钮会显示"发送中..."，并在发送成功后，60秒内按钮会显示倒计时，倒计时结束后，按钮会恢复为"发送验证码"，用户可以重新点击发送。请注意，以上示例中的验证码发送和倒计时仅为模拟，你需要根据实际的验证码发送逻辑和计时器需求来调整代码。