vue3.0+element-plus桌面端聊天实战|vue3仿制微信/QQ界面

xiaoyan2015 · · 3479 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

## 项目简介 > 继上次分享一个vue3.x手机端聊天项目后,今天带来的是vue3 web端实战聊天室案例。 > [Vue3WebChat聊天室](https://www.cnblogs.com/xiaoyan2017/p/14307849.html) 基于`vue3.0全家桶+饿了么vue3组件库element-plus及自定义vue3组件v3layer+v3scroll`等技术开发架构的一款`pc端聊天`实例项目。 ![](https://oscimg.oschina.net/oscnet/up-78fba6c82ba6a8810852ceabfcbced7d227.png) - 微信皮肤风格 ![](https://oscimg.oschina.net/oscnet/up-45e3491de1b974806336b087e5f1935290f.gif) - QQ皮肤风格 ![](https://oscimg.oschina.net/oscnet/up-ec7cf1af26cf6741871bbdac1768b65812a.gif) ## 技术栈 - 编码+技术:vscode + vue3.x+vue-router@4+vuex4 - 组件库:element-plus (饿了么桌面端vue3组件库) - 弹窗组件:v3layer(基于vue3自定义弹窗组件) - 虚拟滚动条:v3scroll(基于vue3自定义滚动条组件) - 字体图标:阿里iconfont图标 ## 目录结构 ![](https://oscimg.oschina.net/oscnet/up-7841f2cbbc5289d1c3682087de3685c33ac.png) ![](https://oscimg.oschina.net/oscnet/up-814294126a600da00f1dc8dc73e1f2e9306.png) ![](https://oscimg.oschina.net/oscnet/up-377cd16f686dd20e86b91f30b5b7aa7e929.png) ![](https://image-static.segmentfault.com/265/188/2651883775-600adc5a38c4d) ![](https://oscimg.oschina.net/oscnet/up-e09e096c9da01be6af6a0ffeae6d6acf198.png) ![](https://oscimg.oschina.net/oscnet/up-89385b9cfc80174cb470618bc5862974a54.png) ![](https://oscimg.oschina.net/oscnet/up-e1f966c4f2ee0da81329c776e3752cf4b5c.png) ![](https://image-static.segmentfault.com/346/799/3467991350-600adcc50e11c) ![](https://oscimg.oschina.net/oscnet/up-ec0cd0ffb7af937959c5ae6139c527e0dba.png) ![](https://oscimg.oschina.net/oscnet/up-d7d713dd9640ca0fcdbd1982644c4d0b4bd.png) ![](https://oscimg.oschina.net/oscnet/up-09ee0c49b14755ee9879a67d1507810d737.png) ![](https://oscimg.oschina.net/oscnet/up-886a772f9f090bc01dfa80c9f14adaa99d5.png) ![](https://oscimg.oschina.net/oscnet/up-4fdb998a95adf0df26fcbd6337cb9848400.png) ![](https://image-static.segmentfault.com/378/000/3780003749-600ade22eb645) ![](https://image-static.segmentfault.com/351/682/3516829045-600ade6ae03c1) ![](https://oscimg.oschina.net/oscnet/up-aec3f3d1e72a63f1a11644cbd26af1fbb0f.png) ## vue3.x自定义全局弹窗 项目中所有页面弹窗功能均是自定义vue3组件来实现。 ![](https://image-static.segmentfault.com/400/546/4005463532-600ae1b955487) 大家如果感兴趣,可以去看看我之前写的vue3系列之开发自定义弹窗。 [vue3.x开发pc网页端自定义弹窗组件](https://www.cnblogs.com/xiaoyan2017/p/14221729.html) ## vue3.x自定义全局滚动条 同样的所有页面滚动条也都是实现vue3自定义模拟系统原生滚动条来实现。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e07cf83835344e80b0e990c50c83e2e6~tplv-k3u1fbpfcp-watermark.image) v3scroll 一款轻量级vue3.0自定义美化滚动条组件。支持动态监听DOM改变来更新滚动条 [vue3自定义组件之自定义虚拟滚动条](https://www.cnblogs.com/xiaoyan2017/p/14242983.html) ## app.vue主页面模板 项目整体分为侧边栏、中间栏和右侧主容器三个模块。 ``` <div :class="['vui__wrapper', store.state.isWinMaximize&&'maximize']"> <div class="vui__board flexbox"> <div class="flex1 flexbox"> <!-- 右上角按钮 --> <WinBar v-if="!route.meta.hideWinBar" /> <SideBar v-if="!route.meta.hideSideBar" class="nt__sidebar flexbox flex-col" /> <Middle v-show="!route.meta.hideMiddle" /> <!-- 主内容区 --> <router-view class="nt__mainbox flex1 flexbox flex-col"></router-view> </div> </div> </div> ``` ## vue3引入公共文件 在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中可以两种方法操作store,createStore和getCurrentInstance来实现。 ``` /** * @Desc vue3.0表单注册 * <a href="/user/Time" title="@Time">@Time</a> andy by 2021-01 * @About Q:282310962 wx:xy190310 */ <script> import { reactive, toRefs, inject, getCurrentInstance } from 'vue' export default { components: {}, 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> ``` ## 毛玻璃效果 项目背景采用整体虚化达到模糊的效果。使用的是svg filter来实现。 ``` <!-- //虚化背景(毛玻璃) --> <div class="vui__bgblur"> <svg width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none"> <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter> <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image> </svg> <div class="blur-cover"></div> </div> ``` ## 图片/视频预览 图片预览功能使用到了饿了么vue3组件库中的image组件。 ``` <el-image class="img__pic" :src="item.imgsrc" :preview-src-list="[item.imgsrc]" hide-on-click-modal /> ``` 而视频预览则是使用v3layer弹窗组件来实现。 ``` <v3-layer v-model="isShowVideoPlayer" title="<i class='iconfont icon-bofang'></i> 视频预览" layerStyle="background:#f9f9f9" opacity=".2" :area="['550px', '450px']" xclose resize :maximize="true" > <video class="vplayer" ref="playerRef" autoplay preload="auto" controls :src="videoList.videosrc" :poster="videoList.imgsrc" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline /> </v3-layer> ``` 总体实现起来不是很复杂。以上就是vue3开发网页端聊天项目的介绍。后续还会分享一些vue3项目。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/035c8d7b00164d8089e6ae790ed48f3f~tplv-k3u1fbpfcp-zoom-1.image)

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

3479 次点击  ∙  1 赞  
加入收藏 微博
1 回复  |  直到 2021-02-22 10:11:24
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传