electron-vue 隐藏顶部菜单 隐藏导航 、自定义导航

myheader.vue

<template>
    

     <div id="myHeader">

        <div class="titlebtn">

            <div class="min"  @click="min"> <img src="../assets/min.png" alt=""></div>
            <div class="max"><button  @click="max"> [] </button></div>
            <div class="close"><button @click="close"> X </button></div>     
        </div>

    </div>


</template>


<script>
    
    export default{

        data(){

            return{
                
            }
        },methods:{
            min(){
                    this.$electron.ipcRenderer.send('window-min');      
            },
            max(){

                    this.$electron.ipcRenderer.send('window-max');
            },
            close(){
                    this.$electron.ipcRenderer.send('window-close');

            }

        }
    }


</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;


    .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.vue';

  export default {
    name: 'electronvuedemo',

    components:{

      MyHeader: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

//接收渲染进程广播的数据执行最小化 最大化  关闭的操作


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()

})

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;