第一章 基础知识点
第二章 electron-vue
第三章 自定义标题栏
electron项目默认有自己的标题栏(包含标题、最小化、最大化,关闭),根据项目需求,可以去掉,定制开发
代码如下(src/main/index.js):
mainWindow = new BrowserWindow({
useContentSize: true,
frame: false // 去掉默认的标题栏
})
代码如下(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; // 设置可拖动)
<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'
})
}
按钮元素:
<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()
})
至此,一个简单的标题栏组件就完成了~