vue3获取验证码，60s倒计时

验证码，60s倒计时"/>

vue3获取验证码，60s倒计时

 此处用的是varlet组件库，同理可以使用其他的组件库

 关于页面部分只展示输入手机号及注册码部分

<!-- 手机号 -->
<div class="phoneForm"><div class="phoneIcon"><var-icon name="phone-outline" color="rgb(38,89,247)" size="25px" /></div><div class="phone"><var-input placeholder="请输入手机号" :rules="[v => !!v || '手机号不能为空', v => v.length === 11 || '手机号输入错误']" v-model="formData.phone" maxlength="11" /></div>
</div>
<!-- 验证码 -->
<div class="codeForm"><div class="codeIcon"><var-icon name="message-processing-outline" color="rgb(38,89,247)" size="25px" /></div><div class="code"><var-input placeholder="请输入验证码" :rules="[v => v.length === 6 || '请输入正确的验证码']" v-model="value" /></div><var-button :disabled="dis" text class="getCode" @click="getCode()"><span v-if="show">获取验证码</span><span v-else>{{ timeCount }}s后重试</span></var-button>
</div>

js部分

此处js需要使用正则表达式判断手机号是否符合规定，点击获取后先进行手机号判断，如果判断成功则实现60s后重试，同时按钮为禁用状态，此处获取验证码的提示为snackbar提示条，与vant、element中的消息提示很类似，可以参考文档实现

// 验证码
import { ref } from 'vue'
import { Snackbar } from '@varlet/ui'
// 设置展示
const show = ref(true)
// 设置验证码60s初始值
const timeCount = ref(60)
// 设置按钮点击后禁用
const dis = ref(false)
const countDown = ref()// 获取验证码 倒计时
const getCode = () => {// 设置正则表达式————手机号判断let m = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(formData.phone)if (!formData.phone) {setTimeout(() => {Snackbar.error("手机号不能为空")}, 200)} else if (formData.phone.length !== 11) {setTimeout(() => {Snackbar.error("手机格式错误，请重新输入")}, 200)} else if (m) {setTimeout(() => {Snackbar.success("获取成功")}, 200)// setInterval()函数实现定时调用，1000为毫秒也就是1scountDown.value = setInterval(() => {setTimeout(() => {if (timeCount.value > 0 && timeCount.value <= 60) {dis.value = trueshow.value = falsetimeCount.value--} else {show.value = true// 取消setInterval()函数设定的定时执行操作clearInterval(timeCount.value)}}, 0)}, 1000)} else if (!m) {setTimeout(() => {Snackbar.error("手机格式错误，请重新输入")}, 200)}}