今天给大家分享的是使用Vue3.0、Vuex实现表单验证和倒计时操作。

先来上一段效果演示吧。

这是最新开发的一个Vue3聊天室项目中使用到的登录及注册功能。

演示中的底部Snakbar提示，是基于vue3.0构建的自定义组件v3popup来实现。

前段时间也有过一篇分享文章，大家感兴趣的话，也可以去看看。

vue3.0 vite自定义导航 弹框组件

使用Vue3.x语法来实现表单的登录/注册及倒计时功能。

vue3中使用form表单

<template>
    <div>
        <div class="vui__scrollview vui__scrollview-lgreg flex1">
            <div class="nt__lgregPanel">
				<div class="lgreg-header">
					<div class="slogan">
						<img class="logo" src="@assets/v3-logo.png" />
						<p class="text ff-st">欢迎使用Vue3-Chatroomp>
					div>
					<div class="forms">
						<form @submit.prevent="handleSubmit">
							<div class="item flexbox flex_alignc">
								<input class="iptxt flex1" type="text" v-model="formObj.tel" placeholder="请输入手机号" maxlength="11" />
							div>
							<div class="item flexbox flex_alignc">
								<input class="iptxt flex1" type="password" v-model="formObj.pwd" placeholder="请输入密码" />
							div>
							<div class="item btns">
								<button class="vui__btn vui__btn-primary" type="submit">登录button>
							div>
							<div class="item lgreg-lk">
								<router-link class="navigator" to="#">忘记密码router-link>
								<router-link class="navigator" to="/register">注册账号router-link>
							div>
						form>
					div>
				div>
			div>
        div>
    div>
template>

通过getCurrentInstance获取上下文，可用来操作store或router。

通过reactive来声明一个响应式表单对象。

<script>
import { reactive, inject, getCurrentInstance } from \'vue\'
export default {
    setup() {
        const { ctx } = getCurrentInstance()

        const v3popup = inject(\'v3popup\')

        const utils = inject(\'utils\')

        const formObj = reactive({})

        const Snackbar = (content) => {
            v3popup({
                content: `

`,
                popupStyle: \'background:#ff4848;border-radius:1px;color:#fff;\',
                position: \'bottom\',
                time: 2
            })
        }

        const handleSubmit = () => {
            if(!formObj.tel){
                Snackbar(\'手机号不能为空！\')
            }else if(!utils.checkTel(formObj.tel)){
                Snackbar(\'手机号格式不正确！\')
            }else if(!formObj.pwd){
                Snackbar(\'密码不能为空！\')
            }else{
                ctx.$store.commit(\'SET_TOKEN\', utils.setToken());
                ctx.$store.commit(\'SET_USER\', formObj.tel);

                v3popup({
                    content: \'恭喜，登录成功！\', time: 2, shadeClose: false, onEnd() {
                        ctx.$router.push(\'/\')
                    }
                })
            }
        }

        return {
            formObj,
            handleSubmit
        }
    }
}
script>

这样一个简单的登录表单验证就完成了。

vue3实现60s倒计时

声明一个reactive响应式数据。

const data = reactive({
    vcodeText: \'获取验证码\',
    disabled: false,
    time: 0,
})

配合setTimeout定时器来实现。

<template>
    <div>
        // ...
        <div class="item flexbox flex_alignc">
            <input class="iptxt flex1" type="text" v-model="formObj.vcode" placeholder="验证码" />
            <button class="btn-getcode" @click.prevent="handleVcode" :disabled="disabled">{{vcodeText}}button>
        div>
    div>
template>

<script>
import { reactive, toRefs, inject, getCurrentInstance } from \'vue\'
export default {
    components: {},
    setup() {
        // ...

        const formObj = reactive({})
        const data = reactive({
            vcodeText: \'获取验证码\',
            disabled: false,
            time: 0,
        })

        // 60s倒计时
        const handleVcode = () => {
            if(!formObj.tel) {
                Snackbar(\'手机号不能为空！\')
            }else if(!utils.checkTel(formObj.tel)) {
                Snackbar(\'手机号格式不正确！\')
            }else {
                data.time = 60
                data.disabled = true
                countDown()
            }
        }
        const countDown = () => {
            if(data.time > 0) {
                data.vcodeText = \'获取验证码(\'  data.time  \')\'
                data.time--
                setTimeout(countDown, 1000)
            }else{
                data.vcodeText = \'获取验证码\'
                data.time = 0
                data.disabled = false
            }
        }

        return {
            formObj,
            ...toRefs(data),
            handleVcode,
            // ...
        }
    }
}
script>

这样，基于vue3的带60s倒计时功能的注册功能就简单实现了。

整体实践下来，发现vue3开发也很容易上手，而且语法越来越靠拢react了。

ok，今天就分享到这里。后续还会分享一些vue3实例开发，感谢大家的支持！