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

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

先上效果图

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

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

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

    滚动条内容区...

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

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

vue3注册form表单

    

        

        

        
{{vcodeText}}
    

    
注册
    

        已有账号，去登录
    

同样的通过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实现朋友圈及表单验证的相关分享，希望大家能喜欢~