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

FreeZinG 發布于2019-08-01 17:52 / 962人閱讀

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

上一篇：electron+vue制作桌面應用--自定義標題欄中我們介紹了如何使用electon制作自定義樣式的標題欄
接下來，我們介紹一下標題欄上的最大化、最小化和關閉按鈕如何實現

首先查閱electron文檔BrowserWindow部分，我們發現electron已經準備好win.close()、win.maximize()和win.minimize()三個方法供我們調用了。

那么問題來了，我的渲染進程獲取到了點擊事件，如何到主進程中調用對應的方法呢？

這里有兩種方法，一種是使用ipc，另一種是使用romate
這里先介紹下ipc
新建組件Titlebtn，"src enderercomponentsmytitleTitlebtn.vue"

這里需要注意一下，因為之前我們設置標題欄樣式-webkit-app-region: drag，這里按鈕必須設置樣式-webkit-app-region: no-drag，不然按鈕將無法選中或點擊
鼠標點擊按鈕后，通過ipcRenderer向主進程發送消息
然后修改我們的Titlebtn組件，如下

修改主進程index.js，監聽渲染進程的消息，并根據消息執行相應的動作

import { ipcMain } from "electron"
ipcMain.on("min", e=> mainWindow.minimize());
ipcMain.on("max", e=> {
    if (mainWindow.isMaximized()) {
        mainWindow.unmaximize()
    } else {
        mainWindow.maximize()
    }
});
ipcMain.on("close", e=> mainWindow.close());

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

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

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

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
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