elmentui设置验证码

Element UI提供了一个`el-input`组件，可以配合`el-button`等组件来实现验证码功能。

首先，您需要在模板中使用`el-input`组件，并且添加一个按钮来触发发送验证码的操作。例如：

<template>
  <div>
    <el-input v-model="email" placeholder="请输入邮箱"></el-input>
    <el-button @click="sendCode" :disabled="disableSendCode">{{ sendText }}</el-button>
    <el-input v-model="code" placeholder="请输入验证码"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      code: '',
      sendText: '发送验证码',
      disableSendCode: false
    };
  },
  methods: {
    sendCode() {
      // TODO: 发送验证码逻辑
      // 发送成功后，设置disableSendCode为true，并将sendText设置为倒计时
    }
  }
};
</script>

接下来，我们需要在`sendCode`方法中发送验证码，并且在发送成功后设置`disableSendCode`为`true`，同时将`sendText`设置为倒计时。例如：

<script>
export default {
  data() {
    return {
      email: '',
      code: '',
      sendText: '发送验证码',
      disableSendCode: false,
      countdown: 60
    };
  },
  methods: {
    sendCode() {
      // TODO: 发送验证码逻辑
      // 发送成功后，设置disableSendCode为true，并将sendText设置为倒计时

      // 模拟发送成功
      this.disableSendCode = true;
      this.sendText = `${this.countdown}s后重新发送`;
      const timer = setInterval(() => {
        if (this.countdown > 1) {
          this.countdown--;
          this.sendText = `${this.countdown}s后重新发送`;
        } else {
          this.countdown = 60;
          this.disableSendCode = false;
          this.sendText = '发送验证码';
          clearInterval(timer);
        }
      }, 1000);
    }
  }
};
</script>

最后，我们需要在提交表单时验证验证码是否正确。例如：

<script>
export default {
  data() {
    return {
      email: '',
      code: '',
      sendText: '发送验证码',
      disableSendCode: false,
      countdown: 60
    };
  },
  methods: {
    sendCode() {
      // TODO: 发送验证码逻辑
      // 发送成功后，设置disableSendCode为true，并将sendText设置为倒计时

      // 模拟发送成功
      this.disableSendCode = true;
      this.sendText = `${this.countdown}s后重新发送`;
      const timer = setInterval(() => {
        if (this.countdown > 1) {
          this.countdown--;
          this.sendText = `${this.countdown}s后重新发送`;
        } else {
          this.countdown = 60;
          this.disableSendCode = false;
          this.sendText = '发送验证码';
          clearInterval(timer);
        }
      }, 1000);
    },
    onSubmit() {
      // TODO: 提交表单逻辑
      if (this.code !== '123456') {
        this.$message.error('验证码错误');
        return;
      }
      // 验证通过，继续提交表单
    }
  }
};
</script>

在这个示例中，我们使用了一个`countdown`变量来存储倒计时时间，并且使用`setInterval`函数来实现倒计时。在提交表单时，我们使用了一个简单的判断来验证验证码是否正确。

希望这个示例可以帮助您在Element UI中实现验证码功能！