vue3+elementplus倒计时效果按钮

效果

代码实现

    
      
            
            
              {{ checkCodeBtn.text }}
            
      
    



import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {isPhone, isEmail} from '@/utils/validate'

export default {
  setup(): any {
    let checkCodeBtn = reactive({
      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