【基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭】前两天有给大家分享tauri+vue3快速搭建项目、封装桌面端多开窗口 。今天继续来分享tauri创建启动窗口、登录窗口切换到主窗口及自定义拖拽区域的一些知识 。希望对想要学习或正在学习的小伙伴有些帮助 。
![基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭](http://img.zhejianglong.com/231018/201R54321-0.png)
文章插图
![基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭](http://img.zhejianglong.com/231018/201R5J24-1.png)
文章插图
- tauri+vue3登录窗口切换主窗口
![基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭](http://img.zhejianglong.com/231018/201R51012-4.png)
文章插图
注意:当只需要一个主窗口,则需要在 label 标识中加入 main字符 。
因为在创建窗口的时候,会 检测main字符 是否存在 , 存在则只允许有一个主窗口 。
// 创建新窗口async createWin(options) {const args = Object.assign({}, windowConfig, options)// 是否主窗口if(args.label.indexOf('main') > -1) {console.log('该窗口是主窗口')this.mainWin = getAll().find(w => w.label.indexOf('main') > -1 && w.label != args.label)await this.mainWin?.hide()}// 创建窗口对象let win = new WebviewWindow(args.label, args)// 是否最大化if(args.maximized && args.resizable) {win.maximize()}// 窗口创建完毕/失败win.once('tauri://created', async() => {console.log('window create success!')await win?.show()await this.mainWin?.close()})win.once('tauri://error', async() => {console.log('window create error!')})}另外创建新窗口的时候,总会有一下左上角到居中闪动窗口 。在配置参数中设置 visible: false 隐藏窗口,当窗口创建完毕 , 再show显示窗口即可解决 。
// 系统参数配置export const windowConfig = {label: null,// 窗口唯一labeltitle: '',// 窗口标题url: '',// 路由地址urlwidth: 900,// 窗口宽度height: 640,// 窗口高度minWidth: null,// 窗口最小宽度minHeight: null,// 窗口最小高度x: null,// 窗口相对于屏幕左侧坐标y: null,// 窗口相对于屏幕顶端坐标center: true,// 窗口居中显示resizable: true,// 是否支持缩放maximized: false,// 最大化窗口decorations: false,// 窗口是否无边框及导航条alwaysOnTop: false,// 置顶窗口fileDropEnabled: false, // 禁止系统拖放visible: false,// 隐藏窗口}
![基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭](https://m.360buyimg.com/jdcms/jfs/t1/104354/35/34005/881605/6354d047Ef2c11f50/fc6f97b7ca76181d.gif)
文章插图
如果想制作启动窗口,可以去官方文档查阅资料 。
![基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭](http://img.zhejianglong.com/231018/201R563T-6.png)
文章插图
https://tauri.app/zh/v1/guides/features/splashscreen
- tauri+vue3实现无边框自定义拖拽区域
推荐阅读
- 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践
- 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件
- 基于雪花算法的增强版ID生成器
- 基于QT和C++实现的翻金币游戏
- Mysql单表访问方法,索引合并,多表连接原理,基于规则的优化,子查询优化
- Linux 下模拟制作块设备并挂载
- 基于tauri打造的HTTP API客户端工具-CyberAPI
- 基于纯前端类Excel表格控件实现在线损益表应用
- 知识图谱实体对齐2:基于GNN嵌入的方法
- 15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成