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为毫秒也就是1s
        countDown.value = setInterval(() => {
            setTimeout(() => {
                if (timeCount.value > 0 && timeCount.value <= 60) {
                    dis.value = true
                    show.value = false
                    timeCount.value--
                } else {
                    show.value = true
                    // 取消setInterval()函数设定的定时执行操作
                    clearInterval(timeCount.value)
                }
            }, 0)

        }, 1000)

    } else if (!m) {
        setTimeout(() => {
            Snackbar.error("手机格式错误，请重新输入")
        }, 200)
    }

}