electron-vue学习笔记(1):工具栏和标题栏的设置

最新推荐文章于 2024-05-17 09:44:17 发布
最新推荐文章于 2024-05-17 09:44:17 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： electron 文章标签： electron-vue 标题栏 工具栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hchyboy/article/details/105348546
版权

使用electron-vue是为了桌面应用程序，本来首选是微软的.net，但是收费你懂得，个人研究研究eletron-vue。如有错误，请别骂我~

本人建立工程是根据：https://simulatedgreg.gitbooks.io/electron-vue/cn/getting_started.html  提供的方法建立，建立的末尾出现关于README的警告，应该没有关系。选择的yarn来下载依赖。

建立后目录如下图所示：

去除标题栏在，index.js中设置BrowserWindow的属性frame为 false，去除menu设置mainWindow.setMenu(null)

代码截图：

 

另：BrowserWindow详细说明：

https://www.electronjs.org/docs/api/browser-window

jade-行知意
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron 自定义标题栏_electron+vue制作桌面应用--自定义标题栏
weixin_42316272的博客
12-24 1123
electron会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可mainWindow = new BrowserWindow({useContentSize: true,frame: false...
LunarCalendar:一个基于 Electron + React + Material Design 的工具栏日历，适用于 Mac、Windows 和 Linux
05-10
#LunarCalendar 基于 + + + 构建的工具栏日历应用，适用于Mac，Windows，Linux平台。 日历数据由 提供。 ====== MAC 版下载链接 ====== 开发和构建 依赖于node.js环境，请预先安装。 可直接在浏览器中打开index.html进行预览测试，但注意jQuery的引用问题。 git clone https://git.oschina.net/sinceow/LunarCalendar.git cd LunarCalendar 第一步，安装Node.js依赖和利用Bower下载前端依赖 npm install 第二步，利用Gulp构建项目并 Watch SASS 和 JS npm start 进行本地测试（可选） npm run-script electron 第三步，生成APP #生成osx状态栏日历 npm run-script
自定义Electron标题栏 - 打造个性化的应用界面
最新发布
gitblog_00086的博客
05-17 357
自定义Electron标题栏 - 打造个性化的应用界面 项目地址:https://gitcode.com/AlexTorresDev/custom-electron-titlebar 自定义Electron标题栏 是一个由TypeScript编写的库，专为Electron应用程序设计，提供完全可定制的标题栏解决方案。它的目标是让开发者能够轻松地打造出符合自己应用风格的标题栏，从而提升用户体验。 项...
electron 自定义标题栏(windows 系统)
言小溪 的博客
02-08 6953
其实没有网上那么麻烦，如果你仅仅只是想去掉标题，还有下面的工具栏，只需要如下配置 const win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: "hidden", titleBarOverlay: { color: "#fff", symbolColor: "black", } }); 这样就会出现原生的最小化，关闭等按钮在 win 的右侧，主要这个区域
Electron 自定义菜单与手动添加菜单
lovoo的博客
03-28 1526
label: '文件' ,label: '打开' ,label: '编辑' ,label: '撤销' ,label: '重做' ,label: '剪切' ,label: '复制' ,label: '粘贴' ,label: '全选' ,label: '查看' ,label: '重载' ,// 重载之后, 刷新并关闭所有的次要窗体 if(focusedWindow.id == = 1) {label: '切换全屏' ,label: '切换开发者工具' ,
electron 自定义标题栏_利用 electron 简单快捷地给你的工具加上美观的 GUI
weixin_35823403的博客
01-14 1495
electron + vue + element UI = excellent desktop app感觉没有效果图是不会有人往下看的，那我们先看效果好了~目的在日常工作中，经常需要开发一些小工具用于简化流程以提升开发效率这些小工具通常都比较零碎，需要一个有效的手段将他们聚合在一起，这种手段通常是GUI而GUI的开发是很繁琐的，如果投入很多时间到开发GUI上难免本末倒置。而语言原生的GUI通常都非...
第七节 Electron顶部菜单及右键菜单
08-22 2925
今天说说顶部菜单和右键菜单，顶部菜单electron默认就有不过是英文的。右键可没有需要自己搞。我们看下默认的顶部菜单（如下图1），修改后效果如图2。以上就是今天要讲的内容，主要思路就是利用remote模块调用主进程模块。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。
electron-vue-cli3:electron和vue cli3的基础开发示例
05-25
electron-vue-cli3(electron和vue cli3的基础开发示例)electron+cli3个人博客:desktop_computer: 运行效果克隆代码git clone https://github.com/zjinh/electron-vue-cli3.git安装依赖cd electron-vue-cli3npm i淘宝...
electron-vue-serialport:electron-vue serialport 串口读取
05-24
项目参考项目运行环境1，必须安装nodejsnode下载地址-2，安装node-gypnode-gyp是用来编译c++模块的工具，这里用来编译serialport，node-gyp的github文档-全局安装 npm install -g node-gyp通过命令npm install --...
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
1. **初始化项目**：使用`electron-vue`初始化项目，设置好基本的Vue和Electron结构。 2. **配置打包**：在`package.json`中配置`electron-builder`，指定输出目录、平台、应用信息等。 3. **集成electron-updater**...
electron-vue-template:electron vue 模板
05-08
electron-vue-template 一、项目运行 1. 依赖安装 yarn install # 或者 npm install 2. 开发模式 yarn electron:serve # 或者 npm run electron:serve 3. 生产打包 yarn electron:build # 或者 npm run electron:...
electron之菜单栏和打开新窗口
qq_44961097的博客
05-16 6464
1.主进程main.js var electron = require('electron') var app = electron.app var BrowserWindow = electron.BrowserWindow var mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow({ width: 400, height: 300, webPre
electron 菜单栏_如何在Electron JS中添加任务栏图标菜单？
cumudi0723的博客
07-16 2744
electron 菜单栏If you are new here, please consider checking out my recent articles on Electron JS including Tray Icons. 如果您是新来的，请考虑查看我最近关于Electron JS的文章， 包括托盘图标 。 In this tutorial, we will set up 2 me...
Electron：菜单
读心悦
11-13 2445
所设置的菜单对象的label属性，表示是显示的文本，可以通过设置click属性，给对应的菜单添加点击事件。如果使用这样的方法子Electron应用内创建右键菜单，这些菜单只能显示在窗口页面内部，不能悬浮在窗口之上，那么就会导致右键显示的菜单，可能只显示一部分，出现滚动条。这样当我们在页面上点击鼠标右键的时候，就会触发window上的oncontextmenu事件，同时获取到鼠标的位置，然后在该位置上显示对应的菜单。我们在创建窗口的时候，设置frame为false，就是隐藏默认的标题栏和菜单。
Electron 去掉标题栏并设定可拖动
hb_zhouyj的博客
04-14 3243
1、去掉标题栏 const { BrowserWindow } = require('electron'); let mainWin = new BrowserWindow({ width: 800, height: 800, frame: false, // 去除边框 }) mainWin.show(); 2、设置可拖动 可以在html 元素中设置可拖动区域。 给元素设置样式： style='-webkit-app-region: drag;' 用于设定该部分为可拖
【Electron】vue+electron应用设置菜单
军火库
09-15 2374
这个菜单是指的这里这里主要用到Menu的两个Api，分别是和。这里我们这样实现, 首先创建一个ElectronMenu.js文件，用于存放创建菜单。// 设置菜单栏, win表示当前窗口实例。
Electron入门——菜单栏设置与右键菜单
热门推荐
做GIS梦的人
01-28 1万+
菜单实现 Electron框架中的顶部菜单栏有俩种实现方式 1在主线程中实现 const { app, Menu ,BrowserWindow} = require('electron'); //设置菜单 let dockMenu = Menu.buildFromTemplate([ { label: '文件', click: function () { ...
自定义的 标题栏 electron-vue
05-22
在使用 Electron-Vue 构建应用程序时，可以自定义应用程序窗口的标题栏。以下是一些步骤： 1. 在 `main.js` 文件中，找到 `createWindow` 函数，并将 `frame: false` 改为 `frame: true`。这将启用原生窗口边框。 2. 在 `App.vue` 文件中，添加以下代码： ``` <template> <div class="app"> <div class="titlebar"> <div class="title">{{ title }}</div> <div class="buttons"> <div class="minimize" @click="minimizeWindow"></div> <div class="maximize" @click="toggleMaximize"></div> <div class="close" @click="closeWindow"></div> </div> </div> <router-view/> </div> </template> <script> export default { data() { return { title: 'My App' } }, methods: { minimizeWindow() { this.$store.dispatch('minimizeWindow') }, toggleMaximize() { this.$store.dispatch('toggleMaximize') }, closeWindow() { this.$store.dispatch('closeWindow') } } } </script> <style scoped> .titlebar { -webkit-app-region: drag; height: 30px; background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .title { font-size: 14px; font-weight: bold; } .buttons { display: flex; } .minimize, .maximize, .close { width: 12px; height: 12px; margin-left: 5px; background-repeat: no-repeat; background-position: center; -webkit-app-region: no-drag; } .minimize { background-image: url(./assets/img/minimize.png); } .maximize { background-image: url(./assets/img/maximize.png); } .close { background-image: url(./assets/img/close.png); } </style> ``` 3. 在 `store.js` 文件中，添加以下代码： ``` const state = { window: null, isMaximized: false } const mutations = { SET_WINDOW(state, window) { state.window = window }, SET_IS_MAXIMIZED(state, isMaximized) { state.isMaximized = isMaximized } } const actions = { createWindow({ commit }) { const win = new BrowserWindow({ width: 800, height: 600, show: false, frame: false, webPreferences: { nodeIntegration: true } }) win.on('closed', () => { app.quit() }) commit('SET_WINDOW', win) }, minimizeWindow({ state }) { state.window.minimize() }, toggleMaximize({ state, commit }) { if (state.isMaximized) { state.window.unmaximize() commit('SET_IS_MAXIMIZED', false) } else { state.window.maximize() commit('SET_IS_MAXIMIZED', true) } }, closeWindow({ state }) { state.window.close() } } ``` 4. 在 `index.html` 文件中，添加以下代码： ``` <head> ... <style> .app { -webkit-app-region: no-drag; } </style> </head> ``` 5. 在 `static/img` 文件夹中添加 `minimize.png`、`maximize.png` 和 `close.png` 图片。 现在，您可以自定义标题栏样式并添加标题栏按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值