electron+vue制作桌面应用--自定义标题栏

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制作桌面应用--自定义标题栏最大/小化和关闭