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

先来上一段效果演示吧。

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

Vue3.0+Vant3聊天室｜vue3仿微信App聊天实例

演示中的底部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-Chatroom</p>
					</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: `<div style='text-align:left;'>${content}</div>`,
                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实例开发，感谢大家的支持！