tauri+elementPlus桌面聊天应用|tauri+vue3跨端仿微信

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

### 项目介绍 > [TauriChat聊天室](https://www.cnblogs.com/xiaoyan2017/p/16830689.html) 基于 `tauri+rust+vue3全家桶技术,结合element-plus组件库` 实现桌面端聊天实例|tauri仿制微信客户端。 ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221026234932955-2025508281.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221026235417656-2107225755.gif) ### 技术栈 - 编辑器:VScode - 使用技术:tauri+vue^3.2.37+vite^3.0.2+vuex4+vue-router@4 - UI组件库:element-plus^2.2.17 (饿了么vue3组件库) - 弹窗组件:v3layer(基于vue3自定义pc端弹窗组件) - 滚动条组件:v3scroll(基于vue3模拟滚动条组件) - 矢量图标:阿里iconfont字体图标库 ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221026235953799-301845373.gif) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000016427-1214884911.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000047027-656200018.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000135004-114590603.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000156385-1092721312.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000248881-290674796.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000340733-1601808723.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000611298-2082215043.png) ### tauri创建多窗体 ``` // 关于 const openAboutWin = () => { createWin({ label: 'about', title: '关于', url: '/about', width: 430, height: 330, resizable: false, alwaysOnTop: true, }) } // 主题换肤 const openThemeSkinWin = () => { createWin({ label: 'skin', title: '换肤', url: '/skin', width: 630, height: 400, resizable: false, }) } // 朋友圈 const openQzoneWin = () => { createWin({ label: 'fzone', title: '朋友圈', url: '/fzone', width: 550, height: 700, resizable: false, }) } ``` ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000441021-378517690.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000620539-865647645.png) ### tauri拖拽窗体 配置 decorations: false 参数,则创建的窗口没有顶部导航栏及边框。 设置 data-tauri-drag-region 属性,该区域就能自由拖拽了。 ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027002719131-235938324.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027002412566-1725607765.gif) ``` <template> <div class="nt__navbar"> <div data-tauri-drag-region class="nt__navbar-wrap"> <div class="nt__navbar-title"> <template v-if="$slots.title"><slot name="title" /></template> <template v-else>{{title}}</template> </div> </div> <WinTool :minimizable="minimizable" :maximizable="maximizable" :closable="closable"> <slot name="wbtn" /> </WinTool> </div> </template> ``` ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000654828-324903698.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000953518-1038037865.png) ![](https://img2022.cnblogs.com/blog/1289798/202210/1289798-20221027000841862-1431181513.png) 好了,以上就是tauri+vue3开发桌面版聊天应用的一些分享。 ![image.png](https://static.golangjob.cn/221030/9a62ece5441766c2d693a071bee8ea51.png)

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

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

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