electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄

用戶83 發(fā)布于2019-08-21 17:18 / 967人閱讀

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

electron會默認(rèn)顯示邊框和標(biāo)題欄，如下圖

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

首先我們要把默認(rèn)的標(biāo)題欄刪掉，找到主進(jìn)程中創(chuàng)建窗體部分，new BrowserWindow時添加參數(shù)frame: false即可

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

這樣會把標(biāo)題欄和邊框一并隱藏

然后我們開始制作自己的標(biāo)題欄
創(chuàng)建Mytitle組件"src enderercomponentsmytitleMytitle.vue"

這里需要注意的是，去掉標(biāo)題欄后，應(yīng)用就沒法拖動了，需要拖動的話需要拖動的區(qū)域需要設(shè)置css樣式

-webkit-app-region: drag;

設(shè)置某一部分不可拖動為

-webkit-app-region: no-drag;

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

這里需要對默認(rèn)樣式進(jìn)行重置，不然標(biāo)題欄與窗體會有邊距，like this

現(xiàn)在自定義標(biāo)題欄的基本雛形已經(jīng)完成，剩下的就是基本的請自由發(fā)揮吧

下一篇：electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄最大/小化和關(guān)閉

GPU云服務(wù)器云服務(wù)器自定義標(biāo)題自定義鏡像制作 webrtc結(jié)合electron桌面分享標(biāo)題欄

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89374.html

相關(guān)文章

electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄

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

roundstones 2019-08-30 13:50 評論0 收藏0
electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄

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

韓冰 2019-08-01 17:52 評論0 收藏0
electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄最大/小化和關(guān)閉

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

dinfer 2019-08-30 13:50 評論0 收藏0
electron+vue制作桌面應(yīng)用--自定義標(biāo)題欄最大/小化和關(guān)閉

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

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