Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例

vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例。

运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊天实例项目。实现发送表情图文消息、图片/视频预览、链接查看、粘贴/拖拽发送图片、红包/朋友圈等功能。

技术栈

  • 编码/技术:VScode + Vue3 + Vuex4 + VueRouter@4
  • UI组件库:ElementPlus (饿了么桌面端vue3组件库)
  • 对话框组件:V3Layer(基于vue3.x自定义对话框组件)
  • 虚拟滚动条:V3Scroll(基于vue3.x自定义模拟滚动条组件)
  • 字体图标:阿里iconfont图标

目录结构

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第1张图片

既然到了vue3时代,就全部使用vue3语法实现所有页面的编码。

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第2张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第3张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第4张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第5张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第6张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第7张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第8张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第9张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第10张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第11张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第12张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第13张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第14张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第15张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第16张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第17张图片

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第18张图片

vue3全局弹窗组件

为了达到项目整体效果的一致性,所有弹窗场景都是采用vue3自定义组件实现。

v3layer 一款多功能Vue3自定义全局弹窗组件。支持组件式+函数式调用,超过30+自定义参数配置。

https://blog.csdn.net/yanxinyun1990/article/details/112131592

vue3虚拟滚动条组件

v3scroll 一款基于vue3开发的轻量级替代原生滚动条组件。

https://blog.csdn.net/yanxinyun1990/article/details/112300429

项目中的所有页面都有应用到,功能效果有些类似el-scrollbar组件。

这个是在原先的vue2版本中衍生而来,大家如果对vue2自定义滚动条感兴趣,可以去看看这篇分享。

https://blog.csdn.net/yanxinyun1990/article/details/110394287

App.vue主页面模板

整体布局分为右上角按钮、侧边栏、中间栏、主容器几个模块。

主入口main.js配置

主要是引入一些公共组件/样式、vuex及地址路由。

/**
 * 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')

vue3表单验证+60s倒计时

vue3聊天页面

聊天页面消息滚动区使用到了v3scroll组件,底部编辑器则是采用分离公共组件。

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第19张图片

editor编辑器支持图文混排,光标处插入内容,多行文本,支持输入网址检测,粘贴截图发送等功能。

为大家提供了vue2.xvue3.x两种实现方式。

/**
 * @Desc     vue3实现富文本编辑器
 * @Time     andy by 2021-01
 * @About    Q:282310962  wx:xy190310
 */

end,基于vue3.0+element-plus实现仿QQ/微信界面聊天实战项目就分享到这里。

最后附上两个实例项目

nuxt.js移动端app仿微信界面|Nuxt+Vant聊天室

electron-vue客户端聊天实例|Electron仿微信

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例_第20张图片

 

你可能感兴趣的