基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。

先上效果图

这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus组件库。

<!-- ……右侧发布模板 -->
<v3-layer v-model="isShowPublish" drawer="right" xclose z-index="1001" area="375px">
    <template #content>
        <div style="text-align:left;">
            <div class="flexbox pt-20 pb-10">
                <textarea class="flex1 ff-ar" name="content" placeholder="想记录点什么..." style="border:0;resize:none;height:60px;"></textarea>
            </div>
            <div class="vui-cell pt-10 pb-10">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" multiple :limit="8">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </div>
            <div class="pt-10">
                <div class="vui-cell"><div class="flex1"><i class="iconfont icon-dingwei"></i><span class="fs-30 ml-20">你在哪里？</span></div><i class="iconfont icon-arrR c-999 fs-14"></i></div>
                <div class="vui-cell"><div class="flex1"><i class="iconfont icon-mima"></i><span class="fs-30 ml-20">公开</span></div><i class="iconfont icon-arrR c-999 fs-14"></i></div>
            </div>
            <div class="align-c mt-30">
                <div class="vui__btn vui__btn-primary"><i class="iconfont icon-send"></i> 发布</div>
            </div>
        </div>
    </template>
</v3-layer>

使用了v3layer弹窗组件，内容区域是自定义插槽template模板。

另外朋友圈内容区滚动条是使用v3scroll美化滚动条组件来实现。

<v3-scroll>
    滚动条内容区...
</v3-scroll>

图片预览使用到了element-plus的Image组件。

<el-image hide-on-click-modal
    src="/assets/img/placeholder/xxx.jpg" 
    :preview-src-list="previewList"
/>

如下图：使用了vue3+vuex实现登录验证。

vue3注册form表单

<form @submit.prevent="handleSubmit">
    <ul class="clearfix">
        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.tel" placeholder="请输入手机号" autocomplete="off" maxLength="11" /><em class="borLine"></em></li>
        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="password" v-model="formObj.pwd" placeholder="请输入密码" autocomplete="off" /><em class="borLine"></em></li>
        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.vcode" placeholder="验证码" autocomplete="off" /><em class="borLine"></em><button class="btn-getcode" @click.prevent="handleVcode" :disabled="disabled">{{vcodeText}}</button></li>
    </ul>

    <div class="btns"><button class="vui__btn vui__btn-primary btn__login" type="submit">注册</button></div>
    <div class="lgregLink align-c clearfix">
        <router-link class="navigator" to="/login">已有账号，去登录</router-link>
    </div>
</form>

同样的通过getCurrentInstance来获取上下文，通过reactive来定义响应式数据。

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

        const v3layer = inject('v3layer')

        const utils = inject('utils')

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

        const VTips = (content) => {
            v3layer({
                content: content, layerStyle: 'background:#ff5151;color:#fff;', time: 2
            })
        }

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

                // ...
            }
        }

        // 60s倒计时
        const handleVcode = () => {
            if(!formObj.tel) {
                VTips('手机号不能为空！')
            }else if(!utils.checkTel(formObj.tel)) {
                VTips('手机号格式不正确！')
            }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),
            handleSubmit,
            handleVcode
        }
    }
}
</script>

以上就实现了带60s倒计时的表单验证功能。

总体实现起来还是比较简单的，只是vue3和vue2写法有些不一样而已。

Vue3.0桌面端聊天｜vue3仿微信/QQ网页版聊天实例

好了，以上就是vue3.0实现朋友圈及表单验证的相关分享，希望大家能喜欢~