electron-vue 窗口拖拽及自定义边框,及关闭缩小放大化方法

1.窗口的最小化按钮和关闭按钮以及标题栏自定义,不使用 electron 自身携带的原生标题栏

在src文件夹下main下index.js文件添加

mainWindow = new BrowserWindow({
height: 670,
useContentSize: true,
width: 1080,
minWidth:1080,
minHeight:670,
frame: false,//添加后自定义标题//自定义边框

resizable: false,//可否缩放

movable: false//可否移动

webPreferences: {webSecurity: false}
})

2.设置不可移动以后 单独在组件中在设置某个区域可移动窗口拖拽,添加样式即可style="-webkit-app-region: drag;">

3.electron 自带方法

在src文件夹下main下index.js文件添加

import { app, BrowserWindow, ipcMain } from 'electron'

ipcMain.on('min', e=> mainWindow.minimize());
ipcMain.on('max', e=> mainWindow.maximize());
ipcMain.on('close', e=> mainWindow.close());

//自定义边框以后使用
//vue组件中 const { ipcRenderer } = require( "electron");
<span @click="close">×</span>
方法:close() { ipcRenderer.send('close'); },//关闭窗口

猜你喜欢

转载自www.cnblogs.com/xmyd/p/10945460.html
今日推荐