vue3+elementplus倒计时效果按钮

效果

代码实现

<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 = 10checkCodeBtn.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)
}

vue3+elementplus倒计时效果按钮相关推荐

发送验证码倒计时效果实现
目录前言一.应用场景二.代码演示三. 效果演示总结前言今天用@vueuse/core中提供的一个方法,实现发送验证码时倒计时的一个效果.这样的场景使我们经常会见到的,一起来看一下如何实现 ...
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
Vue3悬浮返回主页按钮设计与实现
整体项目思路需求:实现一个在页面左上方的悬浮按钮,并且固定在一个位置:当路由导航到非 index 界面时,按钮可点击,点击后返回主页 index:当路由就在主页 index 界面时,按钮禁用不可点击 ...
使用 GCD 实现倒计时效果
效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewControl ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
VUE3+ElementPlus
备注:VUE3项目不能使用element-ui,引入后会报错,只能使用element-plus框架一.进入项目目录,安装ElementPlus npm i element-plus 二.安装成功以后 ...
倒计时效果 (JavaScript 小练习 )
按钮10秒之后才可以使用案例分析: ①:开始先把按钮禁用(disabled 属性) ②:一定要获取元素 ③:函数内处理逻辑按钮里面的文字跟着一起变化如果秒数等于0 停止定时器里面文字变为同 ...
健康管理系统第七天（移动端_体检预约(手机号校验、发送验证码之后30秒倒计时效果、生成验证码、向手机发送验证码)）
一.体检预约流程用户可以通过如下操作流程进行体检预约: 1.在移动端首页点击体检预约,页面跳转到套餐列表页面 2.在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面 3.在套餐详情页面点击立即预 ...
vue3+elementPlus主题动态切换2022，亲测可用！
环境系统: win10 64 node版本 v16.13.2 vue: ^3.2.33 element-plus: ^2.2.0 开始在线预览效果 || git仓库地址本文换肤的实现思路是手动 ...

vue3+elementplus倒计时效果按钮

效果

代码实现

validate.ts

vue3+elementplus倒计时效果按钮相关推荐

最新文章

热门文章