electron+vue制作桌面應用--自定義標題欄

韓冰發布于2019-08-01 17:52 / 812人閱讀

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里

electron會默認顯示邊框和標題欄，如下圖

我們來看一下如何自定義一個更加有(gao)意(da)思(shang)的標題欄，例如網易云音樂這種

首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，new BrowserWindow時添加參數frame: false即可

mainWindow = new BrowserWindow({
    useContentSize: true,
    frame: false,
  })

這樣會把標題欄和邊框一并隱藏

然后我們開始制作自己的標題欄
創建Mytitle組件"src enderercomponentsmytitleMytitle.vue"

這里需要注意的是，去掉標題欄后，應用就沒法拖動了，需要拖動的話需要拖動的區域需要設置css樣式

-webkit-app-region: drag;

設置某一部分不可拖動為

-webkit-app-region: no-drag;

然后在App.vue中添加我們新建的組件

這里需要對默認樣式進行重置，不然標題欄與窗體會有邊距，like this

現在自定義標題欄的基本雛形已經完成，剩下的就是基本的請自由發揮吧

下一篇：electron+vue制作桌面應用--自定義標題欄最大/小化和關閉

云服務器 GPU云服務器自定義標題自定義鏡像制作 webrtc結合electron桌面分享標題欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51432.html

electron+vue制作桌面應用--自定義標題欄

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里 electron會默認顯示邊框和標題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

roundstones 2019-08-30 13:50 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里 electron會默認顯示邊框和標題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

用戶83 2019-08-21 17:18 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄最大/小化和關閉

摘要：上一篇制作桌面應用自定義標題欄中我們介紹了如何使用制作自定義樣式的標題欄接下來，我們介紹一下標題欄上的最大化最小化和關閉按鈕如何實現首先查閱文檔部分，我們發現已經準備好和三個方法供我們調用了。上一篇：electron+vue制作桌面應用--自定義標題欄中我們介紹了如何使用electon制作自定義樣式的標題欄接下來，我們介紹一下標題欄上的最大化、最小化和關閉按鈕如何實現首先查閱ele...

dinfer 2019-08-30 13:50 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄最大/小化和關閉

摘要：上一篇制作桌面應用自定義標題欄中我們介紹了如何使用制作自定義樣式的標題欄接下來，我們介紹一下標題欄上的最大化最小化和關閉按鈕如何實現首先查閱文檔部分，我們發現已經準備好和三個方法供我們調用了。上一篇：electron+vue制作桌面應用--自定義標題欄中我們介紹了如何使用electon制作自定義樣式的標題欄接下來，我們介紹一下標題欄上的最大化、最小化和關閉按鈕如何實現首先查閱ele...

liukai90 2019-08-21 17:18 評論0 收藏0