今日给各位共享vue3.x和electron11完成相近QQ顶端导航条新开业多窗口功能。
新项目中的顶端弹窗使用了vue3自定义组件v3layer和electron新创建对话框二种方法。
如上图所述：根据v3layer来完成弹窗功能。
vue3.0系列产品：Vue3自定义PC端弹窗组件V3Layer
<!-- ……设定模版 -->
<v3-layer v-model=\"isShowSettingLayer\"
title=\"<i class=\'iconfont icon-shezhi1\'></i> 设定网页页面\"
layerStyle=\"background:#f9f9f9\"
shade=\"false\"
:area=\"[\'550px\', \'450px\']\"
xclose
dragOut=\"true\"
resize
:maximize=\"true\"
>
<SettingPage @logout=\"onLogout\" />
</v3-layer>启用比较简单，适用自定义内存插槽內容。在其中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，今日的介绍就临时到这儿了。期待以上的內容对我们有些协助哈！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
