我的项目简述
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和微信皮肤写了两种不同款式。
<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.x表单验证
vue3中form表单提交验证及60s倒计时实现。
<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.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仿微信手机端聊天我的项目