electron会默认显示边框和标题栏，如下图
我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏，例如网易云音乐这种
首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可
mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏
然后我们开始制作自己的标题栏
创建Mytitle组件'srcenderercomponentsmytitleMytitle.vue'
<template> <div > </div></template><script> export default { name: 'Mytitle', methods: { } }</script> <style>#mytitle { width: 100%; height: 52px; background-color: rgb(198, 47, 47); -webkit-app-region: drag;}</style> 这里需要注意的是，去掉标题栏后，应用就没法拖动了，需要拖动的话需要拖动的区域需要设置css样式
-webkit-app-region: drag;
设置某一部分不可拖动为
-webkit-app-region: no-drag;
然后在App.vue中添加我们新建的组件
<template> <div > <!-- <router-view></router-view> --> <Mytitle /> </div></template><script> import Mytitle from './components/mytitle/Mytitle'; export default { name: 'vue-electron-demo', components: { Mytitle } }</script><style>html,body,div { margin: 0; padding: 0;}</style> 这里需要对默认样式进行重置，不然标题栏与窗体会有边距，like this
现在自定义标题栏的基本雏形已经完成，剩下的就是基本的请自由发挥吧
下一篇：electron+vue制作桌面应用--自定义标题栏最大/小化和关闭
