myheader.vue ``` <template> <div id="myHeader"> <div class="titlebtn"> <div class="min btn" @click="min"> ― </div> <div class="max btn" @click="max">?</div> <div class="close btn" @click="close">?</div> </div> <el-dialog title="提示" :visible.sync="dialogVisible" width="50%"> <div> <el-radio v-model="radio" label="1">縮小到托盤區</el-radio> <br /> <el-radio v-model="radio" label="2">直接退出</el-radio> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false" size="mini"> 取 消 </el-button> <el-button type="primary" size="mini" @click="closeOrHide"> 確 定 </el-button> </span> </el-dialog> </div> </template> <script> import Vue from "vue"; import { Dialog, Radio, Button } from "element-ui"; Vue.use(Dialog); Vue.use(Radio); export default{ data(){ return{ dialogVisible: false, radio: "1" } }, methods:{ min(){ this.$electron.ipcRenderer.send('window-min'); }, max(){ this.$electron.ipcRenderer.send('window-max'); }, // 開啟彈框 close() { this.dialogVisible = true; }, // 判斷是退出還是縮小到托盤區 closeOrHide() { this.dialogVisible = false; setTimeout(() => { if (this.radio === "1") { this.$electron.ipcRenderer.send("window-hide"); } else if (this.radio === "2") { this.$electron.ipcRenderer.send("window-close"); } }, 300); } } } </script> <style lang="scss"> #myHeader { width: 100%; height: 30px; line-height: 30px; background-color: rgb(198, 47, 47); -webkit-app-region: drag; } .titlebtn { position: relative; width: 200px; height: 30px; line-height: 30px; float: right; -webkit-app-region: no-drag; .btn { cursor: pointer; transition: color 300ms; &:hover { color: #1989fa; } } .min{ position: absolute; background: 'green'; right: 100px; width: 20px; img{ width: 100%; margin-top:6px; } } .max{ position: absolute; background: 'yellow'; right: 60px; width: 20px; } .close{ position: absolute; background:'black'; right:20px; width: 20px; } } </style> ``` app.vue ``` <template> <div id="app"> <MyHeader /> <div class="header"> <router-link to='home'>首頁</router-link> <router-link to='news'>新聞</router-link> </div> <router-view></router-view> </div> </template> <script> import MyHeader from './components/MyHeader'; export default { name: 'electronvuedemo', components:{ MyHeader } } </script> <style> /* CSS */ *{ margin:0px; padding: 0px; } .header{ height: 44px; line-height: 44px; text-align: center; /* background: #000; */ } .header a{ color: #666; } </style> ``` main/icpMain.js ``` //接收渲染進程廣播的數據執行最小化 最大化 關閉的操作 // vue中通過 例如：this.$electron.ipcRenderer.send("window-hide");調用 var {ipcMain,BrowserWindow} =require('electron'); //獲取當前的窗口對象 BrowserWindow.getFocusedWindow(); var mainWindow= BrowserWindow.getFocusedWindow(); ipcMain.on('window-min',()=>{ console.log('window-min') mainWindow.minimize() }) ipcMain.on('window-max',()=>{ if(mainWindow.isMaximized()){ mainWindow.restore(); }else{ mainWindow.maximize() } }) ipcMain.on('window-close',()=>{ mainWindow.close() }) ipcMain.on("window-hide",?()?\=>?{ mainWindow.hide(); }); ``` main/index,js ``` import { app, BrowserWindow } from 'electron' /** * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html */ if (process.env.NODE_ENV !== 'development') { global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') } let mainWindow const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html` function createWindow () { /** * Initial window options */ mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000, frame: false //去掉最頂部的導航 以及 最大化 最小化 關閉按鈕 }) mainWindow.loadURL(winURL) mainWindow.on('closed', () => { mainWindow = null }) //去掉頂部菜單 mainWindow.setMenu(null); //引入ipcMain require('./icpMain.js'); } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (mainWindow === null) { createWindow() } }) /** * Auto Updater * * Uncomment the following code below and install `electron-updater` to * support auto updating. Code Signing with a valid certificate is required. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating */ /* import { autoUpdater } from 'electron-updater' autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall() }) app.on('ready', () => { if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() }) */ ``` electron-vue 自定義導航可拖拽 ``` //可拖拽的 css: -webkit-app-region: drag; //不可拖拽的 css: -webkit-app-region: no-drag; ```