Vue3 PC桌面端聊天室｜vue3.0+elementPlus仿微信/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自定义模拟滚动条组件）

目录结构

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

vue3全局弹窗组件

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

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

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

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

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

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>

主入口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倒计时

<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 = 60data.disabled = truecountDown()}}const countDown = () => {if(data.time > 0) {data.vcodeText = '获取验证码('+ data.time +')'data.time--setTimeout(countDown, 1000)}else{data.vcodeText = '获取验证码'data.time = 0data.disabled = false}}return {formObj,...toRefs(data),handleSubmit,handleVcode}}
}
</script>

vue3聊天页面

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

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

<template><divref="editorRef" class="editor" contentEditable="true" v-html="editorText"@click="handleClick"@input="handleInput"@focus="handleFocus"@blur="handleBlur"style="user-select:text;-webkit-user-select:text;"></div>
</template>

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

/*** @Desc     vue3实现富文本编辑器* @Time     andy by 2021-01* @About    Q：282310962  wx：xy190310*/
<script>import { onMounted, ref, reactive, toRefs, watch } from 'vue'export default {props: {modelValue: { type: String, default: '' }},/*** Vue2.x写法*//*data () {return {editorText: this.modelValue,isChange: true,// 记录光标最后位置lastCursor: null,}},watch: {modelValue() {if(this.isChange) {this.editorText = this.modelValue}}},mounted() {// 处理粘贴事件this.$refs.editor.addEventListener('paste', function(e) {// ...})}methods: {handleInput() {this.$emit('update:modelValue', this.$el.innerHTML)this.lastCursor = this.getLastCursor()},// 删除内容handleDel() {let rangelet sel = window.getSelection()if(this.lastCursor) {sel.removeAllRanges()sel.addRange(this.lastCursor)}range = this.getLastCursor()range.collapse(false)document.execCommand('delete')},// 清空编辑器handleClear() {this.$refs.editor.innerHTML = ''this.$refs.editor.focus()},// 点击编辑器handleClick() {this.$emit('clickFn')this.lastCursor = this.getLastCursor()},// 获取焦点handleFocus() {this.isChange = falsethis.$emit('focusFn')this.lastCursor = this.getLastCursor()},// 失去焦点handleBlur() {this.isChange = truethis.$emit('blurFn')},// 获取光标最后位置getLastCursor() {let sel = window.getSelection()if(sel && sel.rangeCount > 0) {return sel.getRangeAt(0)}},// 光标处插入内容 @param html 需要插入的内容insertHtmlAtCursor(html) {// ...}}*//*** Vue3.x写法*/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 rangelet 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 = falseemit('focusFn')data.lastCursor = getLastCursor()}// 失去焦点const handleBlur = () => {data.isChange = trueemit('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,// ...}}}
</script>

Vue3 PC桌面端聊天室｜vue3.0+elementPlus仿微信/QQ界面相关推荐

Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
大学生用 AI 写论文：次次拿 A，还赚 100 美元；小米集团副总裁崔宝秋离职；抖音上线桌面端聊天软件|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
抖音推出桌面端聊天软件“抖音聊天”
近日抖音在官网上线了一款桌面端聊天软件,名为"抖音聊天",提供 Windows 和 Mac 客户端.官网显示该软件更新时间为 2022 年 12 月 30 日,最新版本为 1.0. ...
android标题栏不被顶上去,Android仿微信QQ聊天顶起输入法不顶起标题栏的问题
在这记录一下输入法弹出的一系列问题,有的输入法弹出就把整个布局弹上去,有的输入法弹出布局不会有变化,有的输入法弹出遮盖输入框等等问题,网上也有很多说加着加那的,但是看一下都不是很完整,解决不了所有问题 ...
Java聊天室2.0版本
仿照了网上的代码和思路对之前的1.0版本进行了修改,按别人的界面和思路来写代码巨难受设计到的一些知识点 1.swing界面: BorderLayout与FlowLayout的区别 BorderLay ...
Java小白版聊天室1.0版本
一个Java初学者写出来的界面简陋,功能及其简单的小白版聊天室,接下来会花一点时间去完善它 1.构思:构建两个main方法,一个为服务端,一个为客户端,客户端向服务端发送消息,服务端创建集合,向集合中 ...
linux下多进程聊天室,从0实现基于Linux socket聊天室-多线程服务器模型-1
前言 Socket在实际系统程序开发张中,应用非常广泛,也非常重要.实际应用中服务器经常需要支持多个客户端连接,实现高并发服务器模型显得尤为重要.高并发服务器从简单的循环服务器模型处理少量网络并发请求 ...
【Linux C】简易群聊聊天室1.0
聊天室简介本聊天室基于LinuxC进行编写,使用到的有tcp协议.多线程.互斥量.条件变量等知识,实现一个最大可接入20个用户的群聊聊天室:服务端运行后,用户运行用户端接入,输入用户名即可接入: ...