基于vue3.0+element-plus实战聊天|vue3仿微信界面网页版

项目简述

Vue3WebChat 基于vue3全家桶技术实现的仿QQ和微信界面桌面端聊天实战开发项目。实现发送图文消息、图片/视频预览、链接查看、拖拽发送图片、红包/朋友圈等功能。

运用技术

• 技术框架：vue3.x+vue-router@4+vuex4
• UI组件库：element-plus (饿了么桌面端vue3组件库)
• 弹窗组件：v3layer（基于vue3自定义弹窗组件）
• 美化滚动条：v3scroll（基于vue3自定义滚动条组件）
• 字体图标：阿里iconfont图标

上面的就是vue3实现的QQ皮肤聊天界面。同样如下也支持微信皮肤。

项目目录

目录结构还是比较清晰，一看就明白的。

vue3.x自定义滚动条组件

为了让项目整体效果保持一致，项目中所有页面均是采用vue3.0自定义滚动条来替换原生滚动条。

v3scroll 一款轻量级vue3自定义模拟系统滚动条组件。支持监听DOM尺寸动态更新滚动条。
https://segmentfault.com/a/11...

vue3.x自定义对话框组件

为了这个项目，特意开发了一款Vue3自定义弹窗组件。


v3layer 基于vue3构建的pc网页版弹窗组件。超过30+参数配置。支持拖拽、缩放、最大化、全局、自定义置顶层级等功能。
https://segmentfault.com/a/11...

main.js引入配置

/**
 * Vue3.0入口配置
 */
 
import { createApp } from 'vue'
import App from './App.vue'
 
// 引入vuex和地址路由
import store from './store'
import router from './router'
 
// 引入公共组件
import Plugins from './plugins'
 
/* 引入公共样式 */
import '@assets/fonts/iconfont.css'
import '@assets/css/reset.css'
import '@assets/css/layout.css'
 
const app = createApp(App)
 
app.use(store)
app.use(router)
app.use(Plugins)
 
app.mount('#app')

App.vue主模板配置

针对QQ和微信皮肤写了两种不同样式。

vue3.x表单验证

vue3中form表单提交验证及60s倒计时实现。

大家看到页面背景有些虚化毛玻璃效果。使用svg filter来实现的。

vue3.x编辑器实现

项目中聊天编辑框仍旧使用的是div可编辑contenteditable实现。

/**
 * @Desc     vue3图文混排编辑器
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */
setup(props, { emit }) {
    const editorRef = ref(null)

    const data = reactive({
        editorText: props.modelValue,
        isChange: true,

        // 记录光标最后位置
        lastCursor: null,
    })

    watch(() => props.modelValue, () => {
        if(data.isChange) {
            data.editorText = props.modelValue
        }
    })

    onMounted(() => {
        // 处理粘贴事件
        editorRef.value.addEventListener('paste', function(e) {
            // ...
        })
    })

    const handleInput = () => {
        emit('update:modelValue', editorRef.value.innerHTML)

        data.lastCursor = getLastCursor()
    }
    // 删除内容
    const handleDel = () => {
        let range
        let sel = window.getSelection()
        if(data.lastCursor) {
            sel.removeAllRanges()
            sel.addRange(data.lastCursor)
        }
        range = getLastCursor()
        range.collapse(false)
        document.execCommand('delete')
    }
    // 清空编辑器
    const handleClear = () => {
        editorRef.value.innerHTML = ''
        editorRef.value.focus()
    }
    
    // 点击编辑器
    const handleClick = () => {
        emit('clickFn')

        data.lastCursor = getLastCursor()
    }
    // 获取焦点
    const handleFocus = () => {
        data.isChange = false
        emit('focusFn')

        data.lastCursor = getLastCursor()
    }
    // 失去焦点
    const handleBlur = () => {
        data.isChange = true
        emit('blurFn')
    }

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


    // 光标处插入内容 @param html 需要插入的内容
    const insertHtmlAtCursor = (html) => {
        // ...
    }

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

        handleInput,
        handleDel,
        handleClear,
        handleClick,
        handleFocus,
        handleBlur,
        insertHtmlAtCursor,
    }
}

好了，以上就是vue3开发仿QQ+微信网页版聊天实战项目。希望大家能喜欢哈~~

最后送上一个Nuxt.js实例项目
nuxt.js聊天室|Vue+Nuxt.js仿微信手机端聊天项目