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 窗口拖拽及自定义边框,及关闭缩小放大化方法的更多相关文章

  1. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽(改变大小/最小化/最大化/还原/关闭)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  3. QT 窗口拖拽移动实现

    我们知道,要实现窗口移动可以直接鼠标点住窗口的标题栏实现拖拽移动,这是窗口默认的行为,在QT中的事件响应函数为moveEvent. 但是现实中经常需要鼠标点住窗口客户区域实现窗口的拖拽移动,代码实现如 ...

  4. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  5. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  7. Unity3D UGUI窗口拖拽

    在开发UGUI时 我们时常需要做一个窗口拖拽的功能 先上代码 using UnityEngine; using UnityEngine.EventSystems; public class DragW ...

  8. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  9. vue内容拖拽放大缩小

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java 3 接口与多态&输入输出流

    接口 中的所有方法都是方法 抽象 使用接口实现多继承 类型的装换 数据成员就变成了static 和 final food 和 snow 都是可以吃的 可以同时实现多个接口 接口与接口之间也可以有继承关 ...

  2. 阿里云王广芳:5G时代,我们需要怎样的边缘计算?

    7月24日阿里云峰会开发者大会的IT基础设施云化专场中,阿里云边缘计算高级技术专家王广芳进行了边缘节点服务重大升级发布,同时与现场观众一同探讨了5G时代边缘计算的思考与技术实践. 5G时代,我们需要怎 ...

  3. Kubernetes Ingress 日志分析与监控的最佳实践

    摘要: Ingress主要提供HTTP层(7层)路由功能,是目前K8s中HTTP/HTTPS服务的主流暴露方式.为简化广大用户对于Ingress日志分析与监控的门槛,阿里云容器服务和日志服务将Ingr ...

  4. 廖雪峰Python总结4

    面向对象编程 将计算机程序视为一系列的命令集合.包含: 数据 操作数据的函数 Python中,所有的数据类型都可以视为对象. 面向对象特点:封装,继承,多态. 类的函数和普通函数:类的第一个参数永远是 ...

  5. svn upgrade

    在我们把我们服务器上的svn 版本号升级以后,我们之前的代码再执行svn命令时,会提示需要执行svn upgrade命令把当前的代码由低版本的svn 上迁移到高版本的svn 上去. 直接执行svn u ...

  6. 24种编程语言的Hello World程序

    24种编程语言的Hello World程序 这篇文章主要介绍了 24 种编程语言的 Hello World 程序,包括熟知的 Java.C 语言.C++.C#.Ruby.Python.PHP 等编程语 ...

  7. jmeter测试APP时如何录制脚本

    jmeter录制脚本需要注意的点: (1)手机和电脑需要处于一个局域网内(如手机和电脑所使用一个wifi) (2)设置手机代理的时候手机IP填写本机IP,端口号要和jmeter的相同,一般情况下端口号 ...

  8. Spark in action on Kubernetes - Spark Operator的原理解析

    前言 在上篇文章中,向大家介绍了如何使用Spark Operator在kubernetes集群上面提交一个计算作业.今天我们会继续使用上篇文章中搭建的Playground进行调试与解析,帮助大家更深入 ...

  9. oracle函数的分类

    v  单行函数:对每一行输入值进行计算,得到相应的计算结果,返回给用户,也就是说,每行作为一个输入参数,经过函数计算得到每行的计算结果. 比如select length(ename) from emp ...

  10. sql —— like

    用于在 WHERE 子句中搜索列中的指定模式. 原表: 一.% %表示任何字符出现任意次数. 1.以某个字符串开头的数据 2.包含某个字符串的数据 3.以某个字符串结尾的数据 二._ 只适用于匹配单个 ...