react / vue3 获取验证码倒计时封装组建

提示：本篇文章写了vue和react 获取验证码倒计时 功能

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、获取email和手机验证码都适用

二、使用步骤

1.React

HTML

   <button className="verify-btn" type="button" disabled={flag} onClick={btnClick}>
       {flag ? <span>{codeRestTime}s</span> : <span>获取验证码</span>}
   </button>

JS 部分

代码如下（示例）：
//本人用的框架 是 ant Design 。

interface IProps {
    phoneNumber: string,
    type: number
}

const VerifyCodeBtn = (props: IProps) => {
    let {t} = useTranslation()
    const [codeRestTime, setCodeRestTime] = useState(180);
    const [flag, setFlag] = useState(false)
    useEffect(() => {
        if (!flag) return
        let timer = setInterval(() => {
            setCodeRestTime(data => {
                data--;
                if (data === 0) {
                    clearInterval(timer)
                    setFlag(false)
                    setCodeRestTime(180)
                }
                return data
            });
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [flag])
    const btnClick = async () => {
        if (isEmpty(props.phoneNumber)) return
        setFlag(true)
        let verifyResult: any = await VerifyApi(props)
        notification.open({
            message: verifyResult.msg,
            top: 70,
            style: {width: 230, color: "#ffffff"},
            description: t('Tips'),
            icon: verifyResult.code === 200 ? <CheckCircleFilled style={{color: '#108ee9'}}/> :
                <CloseCircleFilled style={{color: '#D34151'}}/>,
        });
    }

    return (
        <button className="verify-btn" type="button" disabled={flag} onClick={btnClick}>
            {flag ? <span>{codeRestTime}s</span> : <span> {t('Request')}</span>}
        </button>
    )
}

使用

//组建所在地址

import VerifyCodeBtn from "@/components/VerifyCodeBtn"

   <VerifyCodeBtn phoneNumber={phoneNumber} type={1}/>

2.Vue3 部分

HTML

代码如下（示例）：

   <template>
  <button
      class="verify-btn"
      round
      size="small"
      type="button"
      :disabled="!!codeRestTime"
      @click="btnClick"
  >
    {{ $t(codeRestTime ? `(${codeRestTime})s` : " Request ") }}
  </button>
</template>

JS

<script  lang="ts" setup>
import {ref} from "vue";
import { ElMessage } from 'element-plus'
import {isEmpty, validEmail} from '@/utils/is'
import { verifyApi } from "@/api/apiList";
let codeRestTime = ref<number>(0)

let props = defineProps({
  btnMsg: {
    type: String,
    default: "发送验证码",
  },
  restTime: {
    type: Number,
    default: 60,
  },
  choseType: {
    type: Number,
    default: 1,//1登录 2注册 3忘记密码
  },
  isEmail:{
    type: Boolean,
    default: false,
  },
  phone: {
    type: String,
    default: "",
  },
})
let emit = defineEmits(['sendVerifyCode']);

const btnClick = async () => {
  if(isEmpty(props.phone) || !validEmail(props.phone)) return
  codeRestTime.value = props.restTime;
  let timer: any = setInterval(() => {
    --codeRestTime.value;
    if (!codeRestTime.value) {
      clearInterval(timer);
      timer = null;
    }
  }, 1000);
  let codeParam = props.isEmail ? {email: props.phone} : {mobile: props.phone}
  let res: any = await verifyApi({...codeParam, type: props.choseType}, props.isEmail)
   res&&ElMessage({
    type: 'success',
    center: true,
    message: res.msg
  })
  emit("sendVerifyCode")
}
</script>

使用

//组建所在地址

import verifyCode from "@/components/verifyCode/index.vue"

<verifyCode :phone="1766********" :isEmail="true" />

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。