vue3+elementplus倒计时效果按钮

深碍√TFBOYSˉ_ 2023-01-17 08:27 438阅读 0赞

## 效果 ##

![在这里插入图片描述][20210428091119293.gif]

## 代码实现 ##

<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)
    }

[20210428091119293.gif]: /images/20221021/b828f253e5664f39810d4ae58e2fca86.png