electron vue 拖动窗口

2026-09-01

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//

Electron 无边框窗口最大化最小化关闭功能

Electron 无边框窗口最大化最小化关闭功能目的实现无边框窗口,并添加最大化最小化和关闭功能前提了解Electron 主进程和渲染进程的通讯了解 BrowserWindow相关功能操作流程先在界面上放三个按钮  <section style="-webkit-app-region: no-drag"> <button type="button" id="maxbt&q

electron + vue 实践项目

github地址本地安装环境准备安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限) windows配置cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 因为npm的默认仓库在国外,下载很慢,国内淘宝搞了个CNPM,每10分钟同步一次,完全够用了当然也可以使用yarn下载 npm insta

手把手教Electron+vue的使用

.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node.js,可以使用node

从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）

摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJs及其衍生技术高速发展的同时,Nw和Electron的问世,更是为前端发展提速不少,依稀记得哪位前辈说过,“能用Js改写的,终将用Js改写”,这不,客户端来了!使用Electron也有一段时间了,各种简单复杂的问题,也都或多或少的遇见过,下决心整理出一套客户端模板出来,一是加深一下自己的理解,二是供

electron+vue实现菜单栏

公司开发的产品都是用c++写的,而且还都是几个人,老板想搞下创新,就是看看能否通过其它的方式来实现前后端分离.然后我就了解到了electron这个东西,之前学安卓的时候看到过flutter,不经意间看到了electron,但是没有仔细看,就知道是写工具的.所以最近突然想起来这个东西可以搞一搞.所以我打算以后经常分享一些自己学到的东西给大家.多的不说,上菜. 1.首先创建一个electron+vue的项目(开发工具 Vs Code),用vs打开打开之后的样子. 2.在渲染进程中创建一个js(Men

Electron+Vue – 基础学习(1): 创建项目

Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Electron封装. 一.创建Vue项目 + Electron封装 1.创建Vue项目通过 Vue脚手架工具 vue-cli 创建Vue项目:vue init webpack xxxxxx (注:项目名称中不能出现大写字母) vue init webpack electron-vue 等待Vue项目初

【原创】从零开始搭建Electron+Vue+Webpack项目框架（五）预加载和Electron自动更新

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:到目前为止,我们的项目已经具备了PC客户端该有的一些基础功能和调试环境,但是总感觉缺了灵魂,那就是结合实际项目.实际业务的细节处理,缺着吧...这篇文章就介绍一下预加载和自动更新,文字功底有限,如有介绍的不清楚的地方,欢迎留言

【原创】从零开始搭建Electron+Vue+Webpack项目框架（六）Electron打包，同时构建客户端和web端

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web) 摘要:整个项目就剩最后一哆嗦了,但仅仅是当作demo模版来说,实际项目的话,还有很多需要细化的地方.项目完整代码:https://github.com/luohao8023/electron-vue-template,随博客更新. 一.打包客户

electron+vue制作桌面应用--自定义标题栏

electron会默认显示边框和标题栏,如下图我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可 mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建Mytitle组件

使用electron+vue开发一个跨平台todolist（便签）桌面应用

# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些号称跨平台的运行在手机上的webapp是一个套路.直到我真的需要开发一个跨平台桌面应用的时候,我又认真的尝试了一下electron,我开始意识到:这才是我理想中的跨平台桌面应用开发的最终形态,它简直太优秀了. # 2 在使用electron期间,我顺便写了一个简单的todolist(便签)应用,用于

Electron+Vue开发跨平台桌面应用

Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件.调用更多系统资源,再加上Web开发的低成本.高效率的优势,这种跨平台方式越来越受到开发者的喜爱. Electron是一个基于Chromium和 Node.js,使用 HTML.CSS和JavaScript来构建跨平台应用的跨平台开发框架,兼容 Mac.

2015版Force Touch Mac Book激活三个手指拖动窗口

新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Google,搜索了一下,在Apple的官网找到了还原这个设置的方法.在些翻译一下,希望对国内的朋友有帮助. 从左上角的苹果菜单 () , 选择系统设置选择"辅助功能选项" 在左边菜单里选择鼠标 & 触控板在右边选择触控板查看“激活拖动”是否已经勾上然后在下拉菜单里选择“三

VUE.JS 窗口发生变化时，获取当前窗口的高度。

VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() => { that.screenHeight = window.innerHeight })() } }, data(){ return { screenHeight: window.innerHeight, } }

Teamviewer 手机端怎么拖动窗口，选中文字

Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的点两下不松开就可以拖动点两下不松开也可以选中文字 Teamviewer 手机端怎么右键长按使用右键

Jquery仿IGoogle实现可拖动窗口（源码）

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo. 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets.这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets. 废话就不多说了,直接把源代码贴出来,让大家学习! html 1 <html> 2 <head> 3

Jquery仿IGoogle实现可拖动窗口

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,与编程人生的站长沟通了一下,仿照iGoogle做了一个简单的小demo. 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets.这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets. 废话就不多说了,直接把源代码贴出来,让大家学习! html 1

【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）

摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着学习的态度,去介绍.总结一些常用到的配置及思路,有不恰当的地方,或者待优化的地方,欢迎留言.项目完整代码:https://github.com/luohao8023/electron-vue-template 下面开始~~~ 一.安装依赖 vue.webpack:不多说了 vue-loader:解析

qt 鼠标拖动窗口放大缩小

// 鼠标拖动具体实现void mouseMoveEvent(QMouseEvent * pEvent) { if (pEvent->buttons() & Qt::LeftButton) { if (resizeDir == nodir) {//移动窗口 QPoint newPos = pEvent->globalPos(); move(newPos - m_PressedPos); emit signal_drawWidgetPositionChange(this->pos

Electron+Vue+ElementUI开发环境搭建

Node环境搭建本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v v12.18.1 $ npm -v 6.14.5 $ yarn -v 1.22.4 $ npm list -g --depth 0 +-- hexo@4.2.1 // 忽略Hexo,本人写博用的 `-- yarn@1.22.4 vue脚手架安装为了更加便捷的创建一个vue项目,我们安装脚手架@v

win11拖动窗口造成崩溃的问题

问题描述拖动窗口,随机概率出现屏幕闪烁屏幕黑屏屏幕瞬间分屏解决方法 windowes11贴吧大神给的方案 1,按下 win键+R 输入 regedit 进入注册表,进入以下路径:计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Shell Extensions 2.在Shell Extensions下右键新建一个项,命名为Blocked.选中Blocked右侧右键新建一个字符串值,命名为 {e2bf9676-

electron vue 拖动窗口

热门专题