效果
版本信息
"electron": "^11.0.0"
"vue": "^3.0.0"
代码
实现逻辑
- 1、设置属性实现头部隐藏
- 2、vue中触发事件,使用electron的ipcRenderer方法去发布事件,electron主线程中接收到事件,并调用electron内部的方法实现关闭,最小化等功能。
vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
};
background.js中,这里主要是添加frame: false
,添加底部添加了注释部分的代码,关闭调用的是destroy方法,前面看到很多博客用的都是close,但是没有效果看了electron的issues发现新版本只能用destory
import { app, protocol, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } }
]);
let win;
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
frame: false, //实现头部的隐藏
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
});
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
if (!process.env.IS_TEST) win.webContents.openDevTools();
} else {
createProtocol("app");
// Load the index.html when not in development
win.loadURL("app://./index.html");
}
}
// 实现自定义标题栏,最小化,最大化,关闭
ipcMain.on("window-min", () => win.minimize());
ipcMain.on("window-max", () => {
if (win.isMaximized()) {
win.unmaximize();
} else {
win.maximize();
}
});
ipcMain.on("window-close", () => {
win.destroy();
});
App.vue中
<template>
<div v-if="IS_ELECTRON" class="header">
<div class="left">xxxx应用</div>
<div class="right">
<span class="el-icon-minus" @click="minimizeWin"></span>
<span class="el-icon-full-screen" @click="maximizeWin"></span>
<span class="el-icon-close" @click="closeWin"></span>
</div>
</div>
<router-view />
</template>
<script>
import { ipcRenderer } from "electron";
import { reactive, toRefs } from "vue";
export default {
setup() {
const data = reactive({ IS_ELECTRON: process.env.IS_ELECTRON });
function minimizeWin() {
ipcRenderer.send("window-min");
}
function maximizeWin() {
ipcRenderer.send("window-max");
}
function closeWin() {
ipcRenderer.send("window-close");
}
return { minimizeWin, maximizeWin, closeWin, ...toRefs(data) };
}
};
</script>
<style lang="scss" scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header {
display: flex;
justify-content: space-between;
// 允许拖动应用
-webkit-app-region: drag;
span {
font-size: 20px;
margin-right: 20px;
//避免拖动属性导致不能点击
-webkit-app-region: no-drag;
}
}
</style>
原文地址:https://blog.csdn.net/weixin_35958891/article/details/113797356
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。