electron-vue 无边框+自定义最大化最小化关闭按钮

electron无边框

main/index.js修改

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    frame: false,//添加这一行采用无边框窗口
  })

vue自定义最大化最小化关闭按钮

1. 自定义按钮模板：TitleButton.vue

<template>
  <div 
    class="titlebtn" 
    :style="style"
    @click="click"/>
</template>

<script>
    const {ipcRenderer: ipc} = require('electron');
    const style = {
        min: {
            backgroundColor: 'green',
            right:'65px'
        },
        max: {
            backgroundColor: 'yellow',
            right:'40px'
        },
        close: {
            backgroundColor: 'red',
            right:'15px'
        }
    };
    export default {
        name: 'TitleButton',
        props: ['type'],
        computed: {
            style: function () {
                return style[this.type];
            }
        },
        methods: {
            click: function () {
                ipc.send(this.type);
            }
        }
    }
</script>
    
<style>
.titlebtn {
    position: absolute;
    top: 10px;
    width: 15px;
    height: 15px;
    -webkit-app-region: no-drag;
    border-radius: 50%;
}
.titlebtn:hover{
    border: 1px solid rgba(248, 242, 242, 0.6);
}
</style>

2. App.vue中使用按钮模板

<template>
  <div id="app">
    <div id="mytitle">
        <TitleButton type="min" />
        <TitleButton type="max" />
        <TitleButton type="close" />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import TitleButton from './components/titlebar/TitleButton.vue'
  export default {
    name: 'my-project',
    components:{
      TitleButton
    }
  }
</script>

<style>
html,body{
  padding: 0px;
  margin: 0px;
  border: 0px;
  width:100%;
  height:100%
}
#mytitle {
    position: absolute;
    width: 100%;
    height: 52px;
    -webkit-app-region: drag;
}
  /* CSS */
</style>

3.main/index.js添加

import { app, BrowserWindow, ipcMain } from 'electron'
const ipc = ipcMain

	...

//登录窗口最小化
ipc.on('min',function(){
  mainWindow.minimize();
})
//登录窗口最大化
ipc.on('max',function(){
  if(mainWindow.isMaximized()){
      mainWindow.restore();  
  }else{
      mainWindow.maximize(); 
  }
})
ipc.on('close',function(){
  mainWindow.close();
})

说明

electron窗口设置为无边框后无法拖动，要使窗口可以拖动，可以对相应div的css加上:

-webkit-app-region: drag;

但是加上这个属性后，该div中的元素就无法点击，则需要点击的元素需要加上：

-webkit-app-region: no-drag;

最终效果