electron 学习笔记（三）——自定义标题栏

系列文章目录

第一章 基础知识点
第二章 electron-vue
第三章 自定义标题栏

---

---

前言

electron项目默认有自己的标题栏（包含标题、最小化、最大化，关闭），根据项目需求，可以去掉，定制开发

---

一、效果预览

二、重点步骤

1.去掉默认的标题栏和边框（Main process）

代码如下（src/main/index.js）：

mainWindow = new BrowserWindow({
    useContentSize: true,
    frame: false  // 去掉默认的标题栏
  })

2.自定义标题栏（Render process）

代码如下（src/renderer/components/MyHeader.vue）：

<template>
  <div class="header  text-white">
   我是一个标题栏
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
}
</script>

<style lang="scss">
.header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-app-region: drag;  // 设置可拖动
}
</style>

去掉标题栏后窗口则不可拖动，在自定义的标题栏中需加CSS：-webkit-app-region: drag; // 设置可拖动）

3.在标题栏中引用 【天气】组件

<iframe ref="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&id=99" style="margin-left:20px;">iframe>

iframe内文字颜色改为白色

mounted () {
    const iframe = this.$refs['tianqi']
    iframe.addEventListener('load', () => {
      const a = iframe.contentDocument.querySelector('a')
      a.style.color = 'white'
    })
}

4.最小化、关闭窗口

按钮元素：

<span class="float-right btn-opt text-white">
    <i class="el-icon-minus mr-10" @click="toMin()">i>
    <i class="el-icon-close" @click="toClose()">i>
span>

操作窗口，需要用到主进程的API，所以这里需要借助 [ipcRenderer]进行渲染进程和主进程的通信：

标题栏组件：src/renderer/components/MyHeader.vue

import { ipcRenderer } from 'electron'

methods: {
    toMin () {
      ipcRenderer.send('min-app')
    },
    toClose () {
      ipcRenderer.send('close-app')
    }
  }

主进程src/main/index.js

import { ipcMain } from 'electron'
ipcMain.on('close-app', () => {
  if (mainWindow) {
    mainWindow.close()
  }
})
ipcMain.on('min-app', () => {
  mainWindow.minimize()
})

---

总结

至此，一个简单的标题栏组件就完成了~