electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

FreeZinG 发布于2019-08-01 17:52 / 964人阅读

摘要：上一篇制作桌面应用自定义标题栏中我们介绍了如何使用制作自定义样式的标题栏接下来，我们介绍一下标题栏上的最大化最小化和关闭按钮如何实现首先查阅文档部分，我们发现已经准备好和三个方法供我们调用了。

上一篇：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桌面分享标题栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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