electron自定义标题栏

20pzqm 等级 69 0 0

上贴传送门

【electron】ipc模块使用

electron 自定义标题栏

官方资料

隐藏默认标题栏

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ frame: false })// frame设置为false

支持拖拽

默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏). 在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 可拖拽

body {
  -webkit-app-region: drag;
}

不可拖拽

body {
  -webkit-app-region: drag;
}

示例

目标

  • 制作自定义标题栏,支持拖拽
  • 制作自定义的最大\最小\关闭按钮

    前提

    基于上一帖的代码
    https://github.com/NightsLight-hub/vcped-test
    tag:1-ipc

    引入ant-design-vue

    本人非常喜欢ant-design-vue框架, 本节主要以其作为基础组件库 在vcpeb-test 根目录使用如下命令安装ant-desing-vue
    yarn add ant-design-vue@next
    在main.js中引入antd
    import { createApp } from 'vue';
    import App from './App.vue';
    import router from './router';
    import store from './store';
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    

createApp(App).use(Antd).use(store).use(router).mount('#app');

## 修改`App.vue`,只保留一个`router-view`即可
```html
<template>
  <router-view/>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

修改background.js的frame=false

const browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 关闭默认标题栏
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  });

修改Home.vue

<template>
<!--  使用antd的header 布局,作为标题栏-->
  <a-layout-header>

  </a-layout-header>
  <a-layout-content class="layout-content">
    <div class="home">
      <span>{{ msg }}</span>
    </div>
  </a-layout-content>

</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      msg: ''
    };
  },
  mounted () {
    // eslint-disable-next-line no-debugger
    debugger;
    window.ipcRenderer.receive('mainMsg', (event, ...args) => {
      console.log('get mainMsg');
      this.msg = args[0];
    });
  }
};
</script>
<style scoped>
.ant-layout-header{
  width: 100%;
  height: 65px;
  /* 标题栏设置个便于区分的颜色,可以拖拽用 */
  background-color: #2c3e50;
  /* 设置标题栏可以拖拽 */
  -webkit-app-region: drag;

}
.layout-content{
  height: calc(100vh - 100px);
  width: 100%;
}
</style>

调试

yarn electron:serve

深色部分可以按住左键拖拽窗口

增加最大\最小\关闭按钮

增加三个按钮的组件 关闭按钮组件

<template>
  <a-button id="closeButton" type="text" title="close" @click="closeWindow">
    <template #icon><CloseOutlined /></template>
  </a-button>
</template>

<script>
import { CloseOutlined } from '@ant-design/icons-vue';
export default {
  name: 'closeButton',
  components: {
    CloseOutlined
  },
  methods: {
    closeWindow () {
      const ipcRenderer = window.ipcRenderer;
      ipcRenderer.send('control', 'close');
    }
  }
};
</script>

<style>
#closeButton {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  right: 20px;
  margin: auto 0;
  -webkit-app-region: no-drag;
}
</style>

最大化窗口按钮

<template>
  <a-button id="maxButton" type="text" @click="maxWindow">
    <template #icon><FullscreenOutlined /></template>
  </a-button>
</template>

<script>
import { FullscreenOutlined } from '@ant-design/icons-vue';
export default {
  name: 'maxButton',
  components: {
    FullscreenOutlined
  },
  methods: {
    maxWindow () {
      const ipcRenderer = window.ipcRenderer;
      ipcRenderer.send('control', 'max');
    }
  }
};
</script>

<style>
#maxButton {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  right: 60px;
  margin: auto 0;
  -webkit-app-region: no-drag;
}
</style>

最小化按钮

<template>
  <a-button id="minButton" type="text" @click="minWindow">
    <template #icon>
      <FullscreenExitOutlined />
    </template>
  </a-button>
</template>

<script>
import { FullscreenExitOutlined } from '@ant-design/icons-vue';
export default {
  name: 'MinButton',
  components: {
    FullscreenExitOutlined
  },
  methods: {
    minWindow () {
      const ipcRenderer = window.ipcRenderer;
      ipcRenderer.send('control', 'min');
    }
  }
};
</script>

<style>
#minButton {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  right: 100px;
  margin: auto 0;
  -webkit-app-region: no-drag;
}
</style>

三个按钮的点击事件利用ipcRender ,通过control通道发送响应控制消息给主进程 比如最小化按钮

minWindow () {
  const ipcRenderer = window.ipcRenderer;
  ipcRenderer.send('control', 'min');
}

主进程增加对control通道的响应

ipcMain.on('control', (event, ...args) => {
    if (args[0] === 'min') {
      browserWindow.minimize();
    } else if (args[0] === 'max') {
      if (browserWindow.isMaximized()) {
        browserWindow.unmaximize();
      } else {
        browserWindow.maximize();
      }
    } else if (args[0] === 'close') {
      console.log('close event');
      browserWindow.close();
    }
  });

Home.vue 把三个按钮放到标题栏

<a-layout-header>
    <close-button></close-button>
    <max-button></max-button>
    <min-button></min-button>
  </a-layout-header>

适当调整了 标题栏背景色

.ant-layout-header{
  width: 100%;
  height: 65px;
  /* 标题栏设置个便于区分的颜色,可以拖拽用 */
  background-color: #18bae5;
  /* 设置标题栏可以拖拽 */
  -webkit-app-region: drag;

}

调试

electron自定义标题栏

获取本章代码

https://github.com/NightsLight-hub/vcped-test
tag: 2-customTitleBar
收藏
评论区

相关推荐

(三)使用electron
前提已经实现了(一)里面的效果连接:[https://www.cnblogs.com/yuNotes/p/12884930.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2FyuNotes%2Fp%2F12884930.html) #### 1
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
3、electron打包生成exe文件
打包方式1:DOS窗口命令打包 --------------- DOS 下,输入 npm install electron-packager -g**全局安装**我们的打包神器: cnpm install electron-packager -g 在项目文件夹下面,也就是根目录下面打开DOS执行打包命令: electron-packa
electron(1)安装和使用
下载和安装 # Clone the Quick Start repository git clone https://github.com/atom/electron-quick-start # Install the dependencies and run npm install && npm start 会
AudioContext方法播放音频
`const fs = require('fs'); const electron = require('electron'); const dataPath = (electron.app || electron.remote.app).getPath('userData'); const fPath =` ${dataPath}/file/unzip\`
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron应用使用electron
最新博文地址:[https://segmentfault.com/a/1190000012904543](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000012904543) [](https://www.oschina.net
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron开发跨平台桌面程序入门教程
最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。 Electron是什么呢? ------------- Electron 可以让你使用纯 JavaScript 调用丰富的
Electron桌面端所见即所得
### 突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 **如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态**。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
Rust 的 GUI 框架生态概览
本文比较全面比较了目前主流的 Rust 的 GUI 框架的表现。其中 ++ 表示非常好,-- 表示非常差,而 o 表示处于平均水平。 参与对比的框架共有 8 个,详细的比较结果如下:   Electron + Neon Electron + FFI Electron + NodeJS Cpp Addon Rust Program + Qt sta
TMS WEB Core v1.2预览版:新的Electron应用程序支持
#### 2019年2月20日,星期三 几个月前,我们已经开始与[Electron进行](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftmssoftware.com%2Fsite%2Fblog.asp%3Fpost%3D495)实验。在工作概念验证之后,我们的目标是为Delphi开发人
【electron】ipc模块使用
electron 进程模型 electron 使用多进程架构与chromium类似,electron使用多进程架构。单一进程架构能够节省资源,然而浏览器经常遇到恶意代码,可能导致进程崩溃,浏览器的多个页签公用一个进程必然会一损俱损,因此多进程架构更适合些()。在开发electron的过程中,我们主要接触两个进程: 主进程main process与渲染进程re
electron自定义标题栏
上贴传送门 electron 自定义标题栏 隐藏默认标题栏const BrowserWindow require('electron')const win new BrowserWindow( frame: false )// frame设置为false 支持拖拽默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 webkitap