public/electron-egg
1
0
Fork 0
mirror of https://gitee.com/dromara/electron-egg.git synced 2026-06-10 03:07:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

创建新窗口

Browse Source
This commit is contained in:
gaoshuaixing
2021-10-11 16:47:57 +08:00
parent 0933f53465
commit bdd2d99e9b
6 changed files with 114 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
asset/view_example.html
View File

@@ -16,7 +16,7 @@
</head>
<body>
<div id="content">
这里是 BrowserView 加载的html内容
这是一个html页面
</div>
</body>
</html>

32
electron/ipc/example.js
View File

@@ -44,7 +44,7 @@ exports.messageShowConfirm = function (event, channel, arg) {
buttons: ['确认', '取消'], // 按钮及索引
})
let data = (res === 0) ? '点击确认按钮' : '点击取消按钮';
console.log('[electron] [ipc] [example] [messageShowConfirm] 结果:', res, );
console.log('[electron] [ipc] [example] [messageShowConfirm] 结果:', res);
return data;
}
@@ -82,14 +82,14 @@ exports.loadViewContent = function (event, channel, arg) {
} else {
content = arg.content;
}
browserViewObj = new BrowserView();
MAIN_WINDOW.setBrowserView(browserViewObj)
browserViewObj.setBounds({
x: 300,
y: 80,
y: 170,
width: 650,
height: 480
height: 400
});
browserViewObj.webContents.loadURL(content);
return true
@@ -101,4 +101,26 @@ exports.loadViewContent = function (event, channel, arg) {
exports.removeViewContent = function () {
MAIN_WINDOW.removeBrowserView(browserViewObj);
return true
}
}
/**
* 打开新窗口
*/
exports.createWindow = function (event, channel, arg) {
let content = null;
if (arg.type == 'html') {
content = path.join('file://', app.getAppPath(), arg.content)
} else {
content = arg.content;
}
let winObj = new BrowserWindow({
x: 10,
y: 10,
width: 980,
height: 650
})
winObj.loadURL(content);
return winObj.id
}

5
frontend/src/config/router.config.js
View File

@@ -33,6 +33,11 @@ export const constantRouterMap = [
name: 'DemoWindowViewIndex',
component: () => import('@/views/demo/windowview/Index')
},
{
path: '/demo/window/index',
name: 'DemoWindowIndex',
component: () => import('@/views/demo/window/Index')
},
{
path: '/demo/shortcut/index',
name: 'DemoShortcutIndex',

6
frontend/src/layouts/DemoMenu.vue
View File

@@ -42,6 +42,12 @@ export default {
pageName: 'DemoWindowViewIndex',
params: {}
},
'menu_401' : {
icon: 'profile',
title: '窗口',
pageName: 'DemoWindowIndex',
params: {}
},
'menu_500' : {
icon: 'profile',
title: '软件',

65
frontend/src/views/demo/window/Index.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<div id="app-demo-window-view">
<div class="one-block-1">
<span>
1. 新窗口中加载web内容
</span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="createWindow(0)">打开哔哩哔哩</a-button>
</a-space>
</div>
<div class="one-block-1">
<span>
2. 新窗口中加载html内容
</span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="createWindow(1)">打开html页面</a-button>
</a-space>
</div>
</div>
</template>
<script>
export default {
data() {
return {
views: [
{
type: 'web',
content: 'https://www.bilibili.com/'
},
{
type: 'html',
content: '/asset/view_example.html'
},
],
};
},
methods: {
createWindow (index) {
const self = this;
self.$ipcCallMain('example.createWindow', this.views[index]).then(r => {
console.log(r);
})
},
}
};
</script>
<style lang="less" scoped>
#app-demo-window-view {
padding: 0px 10px;
text-align: left;
width: 100%;
.one-block-1 {
font-size: 16px;
padding-top: 10px;
}
.one-block-2 {
padding-top: 10px;
}
}
</style>

14
frontend/src/views/demo/windowview/Index.vue
View File

@@ -2,20 +2,26 @@
<div id="app-demo-window-view">
<div class="one-block-1">
<span>
1. 嵌入更多的 web 内容
1. 嵌入web内容
</span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="loadViewContent(0)">加载百度页面</a-button>
<a-button @click="removeViewContent(0)">移除百度页面</a-button>
</a-space>
</div>
<div class="one-block-1">
<span>
2. 嵌入html内容
</span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="loadViewContent(1)">加载html页面</a-button>
<a-button @click="removeViewContent(1)">移除html页面</a-button>
</a-space>
</div>
<div class="one-block-2">
<template></template>
</div>
</div>
</template>
<script>