张恒

添加自定义的程序头部,开启全屏模式

1 +export default {
2 + Mainfunc (ipc, mainWindow) {
3 + ipc.on('windows-mini', () => {
4 + mainWindow.minimize()
5 + })
6 + ipc.on('window-max', (event) => {
7 + if (mainWindow.isMaximized()) {
8 + event.reply('window-confirm', false)
9 + mainWindow.restore()
10 + } else {
11 + event.reply('window-confirm', true)
12 + mainWindow.maximize()
13 + }
14 + })
15 + ipc.on('window-close', () => {
16 + mainWindow.close()
17 + })
18 + }
19 +}
1 -import { BrowserWindow, Menu } from 'electron' 1 +import { BrowserWindow, Menu, ipcMain } from 'electron'
2 import menuconfig from '../config/menu' 2 import menuconfig from '../config/menu'
3 import config from '@config' 3 import config from '@config'
4 +import setIpc from './ipcMain'
4 import electronDevtoolsInstaller, { VUEJS_DEVTOOLS } from 'electron-devtools-installer' 5 import electronDevtoolsInstaller, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
5 6
6 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html` 7 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`
...@@ -8,13 +9,14 @@ const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` ...@@ -8,13 +9,14 @@ const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080`
8 function createMainWindow () { 9 function createMainWindow () {
9 let mainWindow 10 let mainWindow
10 /** 11 /**
11 - * Initial window options 12 + * Initial window options
12 - */ 13 + */
13 mainWindow = new BrowserWindow({ 14 mainWindow = new BrowserWindow({
14 height: 600, 15 height: 600,
15 useContentSize: true, 16 useContentSize: true,
16 width: 1000, 17 width: 1000,
17 show: false, 18 show: false,
19 + frame: false,
18 titleBarStyle: 'hidden', 20 titleBarStyle: 'hidden',
19 webPreferences: { 21 webPreferences: {
20 nodeIntegration: true 22 nodeIntegration: true
...@@ -25,6 +27,8 @@ function createMainWindow () { ...@@ -25,6 +27,8 @@ function createMainWindow () {
25 Menu.setApplicationMenu(menu) 27 Menu.setApplicationMenu(menu)
26 mainWindow.loadURL(winURL) 28 mainWindow.loadURL(winURL)
27 29
30 + setIpc.Mainfunc(ipcMain, mainWindow)
31 +
28 if (process.env.NODE_ENV === 'development') { 32 if (process.env.NODE_ENV === 'development') {
29 mainWindow.webContents.once('dom-ready', () => { 33 mainWindow.webContents.once('dom-ready', () => {
30 mainWindow.show() 34 mainWindow.show()
......
1 <!-- --> 1 <!-- -->
2 <template> 2 <template>
3 - <div class="title"> 3 + <div class="window-title">
4 <!-- 软件logo预留位置 --> 4 <!-- 软件logo预留位置 -->
5 <div style="-webkit-app-region: drag;" class="logo"></div> 5 <div style="-webkit-app-region: drag;" class="logo"></div>
6 <!-- 菜单栏位置 --> 6 <!-- 菜单栏位置 -->
...@@ -33,18 +33,34 @@ export default { ...@@ -33,18 +33,34 @@ export default {
33 mounted() {}, 33 mounted() {},
34 34
35 methods: { 35 methods: {
36 - 36 + Mini() {
37 + this.$electron.ipcRenderer.send("windows-mini");
38 + },
39 + MixOrReduction() {
40 + this.$electron.ipcRenderer.send("window-max");
41 + this.$electron.ipcRenderer.on(
42 + "window-confirm",
43 + (event, arg) => (this.mix = arg)
44 + );
45 + },
46 + Close() {
47 + this.$electron.ipcRenderer.send("window-close");
48 + }
37 } 49 }
38 }; 50 };
39 </script> 51 </script>
40 <style rel='stylesheet/scss' lang='scss' scoped> 52 <style rel='stylesheet/scss' lang='scss' scoped>
41 -.title { 53 +.window-title {
42 width: 100%; 54 width: 100%;
43 height: 30px; 55 height: 30px;
44 line-height: 30px; 56 line-height: 30px;
45 background-color: #ffffff; 57 background-color: #ffffff;
46 color: rgba(60, 60, 60, 0.6); 58 color: rgba(60, 60, 60, 0.6);
47 display: flex; 59 display: flex;
60 + -webkit-app-region: drag;
61 + position: fixed;
62 + top: 0;
63 + z-index: 99999;
48 .controls-container { 64 .controls-container {
49 display: flex; 65 display: flex;
50 flex-grow: 0; 66 flex-grow: 0;
......
...@@ -46,6 +46,7 @@ export default { ...@@ -46,6 +46,7 @@ export default {
46 position: relative; 46 position: relative;
47 height: 100%; 47 height: 100%;
48 width: 100%; 48 width: 100%;
49 + top: 38px;
49 .container-set { 50 .container-set {
50 position: relative; 51 position: relative;
51 padding-top: 62px; 52 padding-top: 62px;
......
...@@ -21,9 +21,11 @@ Vue.prototype.$db = db ...@@ -21,9 +21,11 @@ Vue.prototype.$db = db
21 21
22 Vue.config.productionTip = false 22 Vue.config.productionTip = false
23 /* eslint-disable no-new */ 23 /* eslint-disable no-new */
24 -new Vue({ 24 +const vue = new Vue({
25 components: { App }, 25 components: { App },
26 router, 26 router,
27 store, 27 store,
28 template: '<App/>' 28 template: '<App/>'
29 }).$mount('#app') 29 }).$mount('#app')
30 +
31 +export default vue
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 height: 100%; 18 height: 100%;
19 position: fixed; 19 position: fixed;
20 font-size: 0px; 20 font-size: 0px;
21 - top: 0; 21 + top: 38px;
22 bottom: 0; 22 bottom: 0;
23 left: 0; 23 left: 0;
24 z-index: 1001; 24 z-index: 1001;
......
1 +import $Vm from '../main'
2 +
3 +export default {
4 + send (data) {
5 + $Vm.$electron.ipcRenderer.send(data, (event, arg) => {
6 +
7 + })
8 + }
9 +}