Electron 无边框窗口最大化最小化关闭功能

目的

  • 实现无边框窗口,并添加最大化最小化和关闭功能

前提

操作流程

  1. 先在界面上放三个按钮
    <!-- 窗口的右上角三个操作按钮 -->
<section style="-webkit-app-region: no-drag">
<button type="button" id="maxbt" @click="maxbt">max</button>
<button type="button" id="minbt" @click="minbt">>min</button>
<button type="button" id="closebt" @click="closebt">>close</button>
</section>

**-webkit-app-region: drag是可拖动的样式**

**-webkit-app-region: no-drag是不可拖拽样式**

2. 添加事件把要做的操作发送给主进程

``` javascript  在Vue里面

```在原生 JavaScript 里面

var ipc = require('electron').ipcRenderer;
document.getElementById('maxbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-max'); })
document.getElementById('minbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-min'); })
document.getElementById('closebt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-close'); })
  1. 在主进程中调相应的方法
const electron = require('electron')
const ipc = electron.ipcMain
//登录窗口最小化
ipc.on('window-min', function () {
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
ipc.on('window-close', function () {
mainWindow.close();
}) app.on('ready', createWindow) app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

ipc不适合大数据通讯,最好只做命令的传递 
源码

Electron 无边框窗口最大化最小化关闭功能的更多相关文章

  1. c# 窗体相关操作(最大化/最小化/关闭/标题栏)

    /// <summary> /// 窗体跟随鼠标移动的标记 /// </summary> private bool normalmoving = false; /// < ...

  2. C#winform如何主窗口最大化最小化默认大小

    this.WindowState = FormWindowState.Minimized; bool b = true; private void button2_Click(object sende ...

  3. C# 无边框窗体的最小化问题

    WinForm在窗体风格设置成None时无法最小化的问题.添加以下代码即可实现最小化: protected override CreateParams CreateParams { get { con ...

  4. [Delphi]无边框窗口最大化不挡任务栏方法

    procedure WMGetMinMaxInfo(var mes: TWMGetMinMaxInfo); message WM_GetMinMaxInfo; procedure TfrmMain.W ...

  5. node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

    效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...

  6. PyQt:无边框自定义标题栏及最大化最小化窗体大小调整

    环境 Python3.5.2 PyQt5 陈述 隐藏掉系统的控制栏,实现了自定义的标题控制栏,以及关闭/最大化/最小化的功能,自由调整窗体大小的功能(跟随一个大佬学的),代码内有详细注释 只要把Mai ...

  7. Qt 窗口操作函数(置顶、全屏,最大化最小化按钮设置等)

    一.窗口置顶 与 取消置顶 void MainWindow::on_windowTopButton_clicked() { if (m_flags == NULL) { m_flags = windo ...

  8. Q窗口操作函数(窗口最大化,全屏,隐藏最大化最小化按钮)

    //Qt主窗口没有最小化,最大化按钮且最大化显示  int main(int argc, char *argv[]) { QApplication a(argc, argv); TestQtForWi ...

  9. 【转】ubuntu 12.04 LTS将关闭最大化最小化移动到右上角

    原文网址:http://www.4byte.cn/learning/114801.html ubuntu 12.04 LTS将关闭最大化最小化移动到右上角   还是按下“ALT +F2”组合键,输入g ...

随机推荐

  1. git@github.com出现Permission denied (publickey)

    上传项目的时候出现Permission denied (publickey)这个问题 解决方案如下: 看本地的.git/config设置的仓库url地址和github使用的链接地址是否一致如下图,如u ...

  2. 爬虫技术:数据处理josn和pickle模块

    一:json模块 json模块的作用就是讲json字符串("{"a":1,"b":1}")和python能够识别的字典进行相互转换. imp ...

  3. Zabbix分布式监控系统实践

    https://www.zabbix.com/wiki/howto/install/Ubuntu/ubuntuinstall 环境介绍OS: Ubuntu 10.10 Server 64-bitSer ...

  4. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  5. MySql 的类型和Java的类型

    参考:https://www.cnblogs.com/jerrylz/p/5814460.html 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述           ...

  6. 手动ubuntu 18.04修改登录锁屏界面效果(含登录背景修改)flat-remix

    前言 在ubuntu 18.04,可以通过修改/etc/alternatives/gdm3.css来进行修改 本来想直接使用flat-remix主题,但是只有这个登录界面没有达到作者演示的效果,所以手 ...

  7. ORACLE修改表字段顺序

    1.若'GYZL_BZPWL_TB' 为要修改的表名,注意表名一定要大写!此句可以获取表的id.select object_id from all_objects where object_name= ...

  8. RabbitMQ生产者消费者模型构建(三)

    ConnectionFactory:获取连接(地址,端口号,用户名,密码,虚拟主机等) Connection:一个连接 Channel:数据通信信道,可发送.接收消息 Queue:具体的消息存储队列 ...

  9. mysql主从架构,IO、SQL线程运行为YES,从库没有同步数据

    mysql基于binlog主从复制架构,IO.SQL线程运行为YES,从库没有同步数据 Slave_IO_Running: Yes Slave_SQL_Running: Yes Replicate_D ...

  10. 前端工具-gulp-ruby-sass-解决带有中文路径报错(incompatible character encodings GBK and UTF-8)

    注意:错误提示真的是非常重要的!!! 今天 gulp 一个外国人的项目时编译 sass 时提示 Encoding::CompatibilityError: incompatible character ...