electron 学习笔记(三)——自定义标题栏

系列文章目录

第一章 基础知识点
第二章 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()
})

总结

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

你可能感兴趣的:(electron,vue,html,js,web)