效果

代码实现

<template>
    <el-form label-width="80px" :model="user" :rules="ruleForgetPasswordForm">
      <el-form-item label="验证码" prop="verifyCode">
            <el-input v-model="user.verifyCode" placeholder="请输入验证码" minlength="4" maxlength="4"></el-input>
            <el-button type="warning" :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled"
                       @click="getCheckCode" style="margin-left: 5px">
              {{ checkCodeBtn.text }}
            </el-button>
      </el-form-item>
    </el-form>
</template>

<script lang="ts">
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {isPhone, isEmail} from '@/utils/validate'

export default {
  setup(): any {
    let checkCodeBtn = reactive<any>({
      text: '获取验证码',
      loading: false,
      disabled: false,
      duration: 10,
      timer: null
    })
    // 根据用户名获取验证码
    const getCheckCode = () => {
      // 倒计时期间按钮不能单击
      if (checkCodeBtn.duration !== 10) {
        checkCodeBtn.disabled = true
      }
      // 清除掉定时器
      checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
      // 开启定时器
      checkCodeBtn.timer = setInterval(() => {
        const tmp = checkCodeBtn.duration--
        checkCodeBtn.text = `${tmp}秒`
        if (tmp <= 0) {
          // 清除掉定时器
          clearInterval(checkCodeBtn.timer)
          checkCodeBtn.duration = 10
          checkCodeBtn.text = '重新获取'
          // 设置按钮可以单击
          checkCodeBtn.disabled = false
        }
        console.info(checkCodeBtn.duration)
      }, 1000)
    }
    return {
      checkCodeBtn,
      getCheckCode
      }
    }
  }
}
</script>

validate.ts

// 验证邮箱
export function isEmail(path: string): boolean {
  return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(path)
}

// 验证手机
export function isPhone(tel: string): boolean {
  return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(tel)
}