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製做桌面應用--自定義標題欄最大/小化和關閉