今天分享一下vue3.x和Electron11如何实现类似QQ顶部导航栏的新多窗口功能。
项目顶部的弹出窗口使用vue3自定义组件v3layer和Electron创建一个新窗口。
如上图，弹窗功能是通过v3layer实现的。
vue3.0系列：Vue3自定义PC端弹窗组件V3Layer
调用非常方便，支持自定义槽位内容。这里的SettingPage是一个外部.vue页面。
像上面这样的弹出窗口是通过用Electron 打开一个新窗口来实现的。
//关于窗口const handleAboutWin=()={createWin({title: \’about\’,route: \’/about\’,width: 380,height: 280,resize: false,parent: winCfg.window.id,modal: true,})}//换肤窗口const handleSkinWin=()={createWin({title: \’Skin\’, Route: \’/skin\’, width: 720, height: 475, size: false,})}//时刻窗口const handleFZoneWin=()={createWin( { title: \’朋友圈\’,route: \’/fzone\’,width: 550,height: 700,resize: false,})}//界面管理器窗口const handleUIManager=()={createWin({title: \’界面管理器\’,route: \’ /uimanager\’ , width: 400,height: 475,resize: false,parent: winCfg.window.id,modal: true,})}//顶部const handleAlwaysTop=()={if(data.isAlwaysOnTop) {win.setAlwaysOnTop(false)data .isAlwaysOnTop=false }else {win.setAlwaysOnTop(true)data.isAlwaysOnTop=true}} 也很容易调用createWin函数来创建新窗口。
入站路由为配置的路由URL地址。
支持路由地址参数，也支持自定义数据参数配置。
/** * @desc 创建一个新窗口* @param args {object} {width: 500, height: 300,route: \’/me\’,} */export function createWin(args) { ipcRenderer.send(\’ win- create \’, args)} 这样就可以通过调用createWin方法来创建一个新的表单。
好了，今天的分享就到这里了。希望以上信息对您有所帮助！
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/644474.html