Home Explore Help
Sign In
liangyibo
/
CameraMachine
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

创建新窗口

gaoshuaixing 4 years ago
parent
0933f53465
commit
bdd2d99e9b
6 changed files with 114 additions and 10 deletions
Split View Show Diff Stats
  1. 1 1
      asset/view_example.html
  2. 27 5
      electron/ipc/example.js
  3. 5 0
      frontend/src/config/router.config.js
  4. 6 0
      frontend/src/layouts/DemoMenu.vue
  5. 65 0
      frontend/src/views/demo/window/Index.vue
  6. 10 4
      frontend/src/views/demo/windowview/Index.vue

+ 1 - 1
asset/view_example.html
View File 

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

+ 27 - 5
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 - 0
frontend/src/config/router.config.js
View File 

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

+ 6 - 0
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 - 0
frontend/src/views/demo/window/Index.vue
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>

+ 10 - 4
frontend/src/views/demo/windowview/Index.vue
View File 

@@ -2,19 +2,25 @@
 
   <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-button @click="loadViewContent(1)">加载html页面</a-button>
 
-        <a-button @click="removeViewContent(1)">移除html页面</a-button>
 
       </a-space>
 
     </div>
 
+    <div class="one-block-1">
 
+      <span>
 
+        2. 嵌入html内容
 
+      </span>
 
+    </div>  
     <div class="one-block-2">
 
-      <template></template>
 
+      <a-space>
 
+        <a-button @click="loadViewContent(1)">加载html页面</a-button>
 
+        <a-button @click="removeViewContent(1)">移除html页面</a-button>
 
+      </a-space>
 
     </div>
 
   </div>
 
 </template>