当前位置: 首页 > Web前端 > vue.js

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

时间:2023-04-01 11:41:33 vue.js

项目简介Vue3WebChat是基于vue3全家桶技术仿QQ和微信界面桌面聊天开发项目。实现发送图文消息、预览图片/视频、查看链接、图片拖拽、红包/朋友圈等功能使用技术框架:vue3.x+vue-router@4+vuex4UI组件库: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.jsimportconfiguration/***Vue3.0入口配置*/import{createApp}from'vue'importAppfrom'./App.vue'//引入vuex和地址路由importstorefrom'./store'importrouterfrom'./router'//引入公共组件importPluginsfrom'./plugins'/*引入公共样式*/import'@assets/fonts/iconfont.css'import'@assets/css/reset.css'import'@assets/css/layout.css'constapp=createApp(App)app.use(store)app.use(router)app.use(Plugins)app.mount('#app')App.vue主模板配置为QQ和微信皮肤写了两种不同的样式。>/router-view>

vue3.x表单验证vue3form表单提交验证和60s倒计时实现。每个人都看到页面背景模糊毛玻璃效果是使用svg滤镜实现的。
vue3.x编辑器在项目中实现聊天编辑该框仍然使用diveditablecontenteditable实现。/***@Descvue3图文编辑器*@Timeandy到2021-01*@AboutQ:282310962wx:xy190310*/setup(props,{emit}){consteditorRef=ref(null)constdata=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){//...})})consthandleInput=()=>{emit('update:modelValue',editorRef.value.innerHTML)data.lastCursor=getLastCursor()}//删除内容consthandleDel=()=>{letrangeletsel=window.getSelection()if(data.lastCursor){选择。removeAllRanges()选择。addRange(data.lastCursor)}range=getLastCursor()范围。科尔apse(false)document.execCommand('delete')}//清除编辑器consthandleClear=()=>{editorRef.value.innerHTML=''editorRef.value.focus()}//点击编辑器consthandleClick=()=>{emit('clickFn')data.lastCursor=getLastCursor()}//获取焦点consthandleFocus=()=>{data.isChange=falseemit('focusFn')data.lastCursor=getLastCursor()}//失去焦点consthandleBlur=()=>{data.isChange=trueemit('blurFn')}//获取最后一个光标位置constgetLastCursor=()=>{letsel=window.getSelection()if(sel&&sel.rangeCount>0){returnsel.getRangeAt(0)}}//在光标处插入内容@paramhtml要插入的内容constinsertHtmlAtCursor=(html)=>{//...}return{...toRefs(数据),editorRef,handleInput,handleDel,handleClear,handleClick,handleFocus,handleBlur,insertHtmlAtCursor,}}好了,以上就是Vue3开发仿QQ+微信网页版聊天实战项目,希望大家喜欢~~最后送上一个Nuxt.js实例项目nuxt.js聊天room|Vue+Nuxt.js仿微信手机聊天项目