系列文章目录

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

文章目录

• 系列文章目录
• 前言
• 一、效果预览
• 二、重点步骤
• • 1.去掉默认的标题栏和边框（Main process）
  • 2.自定义标题栏（Render process）
  • 3.在标题栏中引用 【天气】组件
  • 4.最小化、关闭窗口
• 总结

前言

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()
})

总结

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