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

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

如今自定义标题栏的基本雏形已经完成，剩下的就是基本的请自由发挥吧

下一篇：electron+vue制做桌面应用--自定义标题栏最大/小化和关闭