electron会默认显示边框和标题栏，如下图
我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏，例如网易云音乐这种
首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可
mainWindow = new BrowserWindow({
useContentSize: true,
frame: false,
})这样会把标题栏和边框一并隐藏
然后我们开始制作自己的标题栏
创建Mytitle组件'\src\renderer\components\mytitle\Mytitle.vue'
<template>
<div id="mytitle">
</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 id="app">
<!-- <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
现在自定义标题栏的基本雏形已经完成，剩下的就是基本的请自由发挥吧