摘要:會默認顯示邊框和標題欄,如下圖我們來看一下如何自定義一個更加有意思的標題欄,例如網(wǎng)易云音樂這種首先我們要把默認的標題欄刪掉,找到主進程中創(chuàng)建窗體部分,時添加參數(shù)即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創(chuàng)建組件這里
electron會默認顯示邊框和標題欄,如下圖
我們來看一下如何自定義一個更加有(gao)意(da)思(shang)的標題欄,例如網(wǎng)易云音樂這種
首先我們要把默認的標題欄刪掉,找到主進程中創(chuàng)建窗體部分,new BrowserWindow時添加參數(shù)frame: false即可
mainWindow = new BrowserWindow({ useContentSize: true, frame: false, })
這樣會把標題欄和邊框一并隱藏
然后我們開始制作自己的標題欄
創(chuàng)建Mytitle組件"src
enderercomponentsmytitleMytitle.vue"
這里需要注意的是,去掉標題欄后,應用就沒法拖動了,需要拖動的話需要拖動的區(qū)域需要設置css樣式
-webkit-app-region: drag;
設置某一部分不可拖動為
-webkit-app-region: no-drag;
然后在App.vue中添加我們新建的組件
這里需要對默認樣式進行重置,不然標題欄與窗體會有邊距,like this
現(xiàn)在自定義標題欄的基本雛形已經(jīng)完成,剩下的就是基本的請自由發(fā)揮吧
下一篇:electron+vue制作桌面應用--自定義標題欄最大/小化和關閉
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/89374.html
摘要:會默認顯示邊框和標題欄,如下圖我們來看一下如何自定義一個更加有意思的標題欄,例如網(wǎng)易云音樂這種首先我們要把默認的標題欄刪掉,找到主進程中創(chuàng)建窗體部分,時添加參數(shù)即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創(chuàng)建組件這里 electron會默認顯示邊框和標題欄,如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...
摘要:會默認顯示邊框和標題欄,如下圖我們來看一下如何自定義一個更加有意思的標題欄,例如網(wǎng)易云音樂這種首先我們要把默認的標題欄刪掉,找到主進程中創(chuàng)建窗體部分,時添加參數(shù)即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創(chuàng)建組件這里 electron會默認顯示邊框和標題欄,如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...
摘要:上一篇制作桌面應用自定義標題欄中我們介紹了如何使用制作自定義樣式的標題欄接下來,我們介紹一下標題欄上的最大化最小化和關閉按鈕如何實現(xiàn)首先查閱文檔部分,我們發(fā)現(xiàn)已經(jīng)準備好和三個方法供我們調用了。 上一篇:electron+vue制作桌面應用--自定義標題欄中我們介紹了如何使用electon制作自定義樣式的標題欄接下來,我們介紹一下標題欄上的最大化、最小化和關閉按鈕如何實現(xiàn) 首先查閱ele...
摘要:上一篇制作桌面應用自定義標題欄中我們介紹了如何使用制作自定義樣式的標題欄接下來,我們介紹一下標題欄上的最大化最小化和關閉按鈕如何實現(xiàn)首先查閱文檔部分,我們發(fā)現(xiàn)已經(jīng)準備好和三個方法供我們調用了。 上一篇:electron+vue制作桌面應用--自定義標題欄中我們介紹了如何使用electon制作自定義樣式的標題欄接下來,我們介紹一下標題欄上的最大化、最小化和關閉按鈕如何實現(xiàn) 首先查閱ele...
閱讀 754·2021-07-25 21:37
閱讀 3667·2019-08-30 15:55
閱讀 2582·2019-08-30 15:54
閱讀 1739·2019-08-30 15:44
閱讀 3134·2019-08-30 15:44
閱讀 873·2019-08-30 15:43
閱讀 1037·2019-08-29 15:36
閱讀 3050·2019-08-29 10:58