今天给大家分享vue3.x和electron11实现类似QQ顶部导航栏新开多窗口功能。
项目中的顶部弹窗用到了vue3自定义组件v3layer和electron新建窗口两种方式。
如上图：通过v3layer来实现弹窗功能。
vue3.0系列：Vue3自定义PC端弹窗组件V3Layer
调用非常简单，支持自定义插槽内容。其中SettingPage是一个外部.vue页面。
像上面这些弹窗，则是通过electron新开窗口来实现功能。
// 关于窗口
const handleAboutWin = () => {
createWin({
title: '关于',
route: '/about',
width: 380,
height: 280,
resize: false,
parent: winCfg.window.id,
modal: true,
})
}
// 换肤窗口
const handleSkinWin = () => {
createWin({
title: '换肤',
route: '/skin',
width: 720,
height: 475,
resize: 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函数来创建新窗口。
传入的route即为配置的路由url地址。
支持route地址带参，另外还支持自定义data参数配置。
/**
* @desc 创建新窗口
* @param args {object} {width: 500, height: 300, route: '/me', ...}
*/
export function createWin(args) {
ipcRenderer.send('win-create', args)
}
这样就实现了调用createWin方法就可以新建一个窗体。
ok，今天的分享就暂时到这里了。希望以上的内容对大家有所帮助哈！
秒鲨号所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们反馈！本站将在三个工作日内改正。