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>
  1. 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;

最终效果