关于vue.js:基于vue30vant3聊天实例vue3仿微信app界面

我的项目介绍

Vue3Chatroom 一个基于 vue3.0+vant3.x 搭建开发的仿微信手机端 app 界面聊天实例。实现了 发送音讯 / 动图 gif、图片 / 视频预览、网址链接查看、下拉刷新、红包 / 朋友圈 等性能。

技术栈

• 编码 + 技术：Vscode + Vue3.x/Vuex4.x/Vue-Router4
• UI 组件库：Vant3.x (有赞挪动端 vue3.0 组件库)
• 弹层组件：V3Popup（基于 vue3 自定义弹层组件）
• iconfont 图标：阿里字体图标库
• 自定义顶部 Navbar 栏 + 底部 Tabbar

我的项目构造

vue3.0 自定义 navbar+tabbar 组件

我的项目中顶部导航条和底部 tab 栏均是自定义组件实现。

大家如果对其实现形式感兴趣，能够去看看 vue2 中实现形式。
vue.js 实现自定义顶部导航 + 底部 tab 切换

vue3.0 自定义挪动端弹框

我的项目中各种弹框场景都是基于 vue3 开发的自定义弹框组件实现的。

v3popup一款汇合多种弹框动画及类型的 Vue3 多功能 mobile 弹框 组件。
vue3.0 系列之自定义 mobile 弹框组件 |vue3 挪动端对话框

vue.config.js 根本配置

vue3 中 vue.config.js 根底配置信息。

const path = require('path')

module.exports = {
    // 根本门路
    // publicPath: '/',

    // 输入文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启 https
        https: false,
        // 编译完是否关上网页
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack 配置
    chainWebpack: config => {
        // 配置门路别名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

vue3.0 主页面 main.js

引入一些公共组件 / 款式，路由、状态治理等文件。

import {createApp} from 'vue'
import App from './App.vue'

// 引入 vuex 和路由配置
import store from './store'
import router from './router'

// 引入 js
import '@assets/js/fontSize'

// 引入公共组件
import Plugins from './plugins'

const app = createApp(App)

app.use(store)
app.use(router)
app.use(Plugins)

app.mount('#app')

vue3.0 表单验证及登录拦挡

vue3 中应用 getCurrentInstance 获取以后上下文，用来操作 store 或 router。

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

        const v3popup = inject('v3popup')
        const utils = inject('utils')
        const formObj = reactive({})

        // ...

        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);

                // ...
            }
        }

        return {
            formObj,
            handleSubmit
        }
    }
}
</script>

vue3 中配置 全局钩子 实现拦挡登录状态。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判断以后路由地址是否须要登录权限
    if(to.meta.requireAuth) {if(token) {next()
        }else {
            // 未登录受权
            V3Popup({
                content: '还未登录受权！', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
                onEnd: () => {next({ path: '/login'})
                }
            })
        }
    }else {next()
    }
})

vue3.0 聊天模块

我的项目中聊天编辑器局部抽离公共组件 Editor，基于 div 可编辑 contenteditable 属性实现性能。

/**
 * @Desc     Vue3.0 实现文字 +emoj 表情混排
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */
<script>
    import {ref, reactive, toRefs, watch, nextTick} from 'vue'
    export default {
        props: {modelValue: { type: String, default: ''}
        },
        setup(props, { emit}) {const editorRef = ref(null)

            const data = reactive({
                editorText: props.modelValue,
                isChange: true,
                lastCursor: null,
            })

            // ...

            // 获取光标最初地位
            const getLastCursor = () => {let sel = window.getSelection()
                if(sel && sel.rangeCount > 0) {return sel.getRangeAt(0)
                }
            }


            // 光标处插入内容 @param html 须要插入的内容
            const insertHtmlAtCursor = (html) => {
                let sel, range
                if(window.getSelection) {
                    // IE9 及其它浏览器
                    sel = window.getSelection()

                    // ## 留神：判断最初光标地位
                    if(data.lastCursor) {sel.removeAllRanges()
                        sel.addRange(data.lastCursor)
                    }

                    if(sel.getRangeAt && sel.rangeCount) {range = sel.getRangeAt(0)
                        let el = document.createElement('div')
                        el.appendChild(html)
                        var frag = document.createDocumentFragment(), node, lastNode
                        while ((node = el.firstChild)) {lastNode = frag.appendChild(node)
                        }
                        range.insertNode(frag)
                        if(lastNode) {range = range.cloneRange()
                            range.setStartAfter(lastNode)
                            range.collapse(true)
                            sel.removeAllRanges()
                            sel.addRange(range)
                        }
                    }
                } else if(document.selection && document.selection.type != 'Control') {
                    // IE < 9
                    document.selection.createRange().pasteHTML(html)
                }

                // ...
            }

            return {...toRefs(data),
                editorRef,

                handleInput,
                handleDel,

                // ...
            }
        }
    }
</script>

行了，基于 vue3 实现聊天我的项目就介绍到这里。心愿以上分享对大家有些帮忙！

最初附上一个 uniapp 实例我的项目
uniapp+vue 仿抖音小视频 |uni-app 直播实例