首页 > 其他 > 详细

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

时间:2019-05-29 19:44:33      阅读:967      评论:0      收藏:0      [点我收藏+]

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‘); },//关闭窗口

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

原文:https://www.cnblogs.com/xmyd/p/10945460.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!