Electron-Vue # 自定义窗口和标题栏

最新推荐文章于 2024-08-23 09:56:40 发布

真·skysys

最新推荐文章于 2024-08-23 09:56:40 发布

阅读量3.7k

点赞数 1

分类专栏：大前端和跨平台技术文章标签： Electron Vue

请明确标注出处

本文链接：https://blog.csdn.net/qq_33583069/article/details/107137828

版权

大前端和跨平台技术专栏收录该内容

329 篇文章 105 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Electron-Vue应用中创建自定义窗口和标题栏，通过禁止窗口默认边框并在内容区实现拖拽移动。同时，优化用户体验，包括窗口状态的保存，以避免启动时的闪烁效果。引用了《Electron实战》相关章节，并探讨了JS中require和import的区别。

摘要由CSDN通过智能技术生成

创建窗口时，增加一句：frame: false，禁止掉窗口默认边框（只显示内容区）

 win = new BrowserWindow({
   
    width: 800,
    height: 600,
    frame: false,
    webPreferences:

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

真·skysys

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

Electron常见问题 15 - 修改窗口标题

liuzhen007的专栏

06-28

9541

基于Electron创建BrowserWindow窗口后，怎么修改它的标题呢？这是一个非常现实的问题，特别是创建了多个窗口后，我们需要区分它们时。 Electron默认的窗口标题是工程index.html中的title名称。运行应用，主程序界面如下图所示，窗口标题是“main window title”。如果没有指明index.html中的title标签值，窗口的标题名称会读取工程package.json中的name名称：项目工程package.json配置情况如下图所示，和.

Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小

06-09

对应博客地址：https://blog.csdn.net/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码

7 条评论您还未登录，请先登录后发表或查看评论

electron-titlebar-windows使用指南

最新发布

gitblog_01167的博客

08-23

386

electron-titlebar-windows使用指南 electron-titlebar-windowsAdds the Windows 10 ModernUI (Metro)-style titlebars to any Electron-based desktop app.项目地址:https://gitcode.com/gh_mirrors/el/electron-titlebar-...

electron-vue自定义窗口

小蚂蚁

09-10

1106

electron-vue自定义窗口 1.主进程中添加 frame: false mainWindow = new BrowserWindow({ height: 563, minHeight:400, minWidth:500, useContentSize: true, width: 1000, show:false, frame: false,//隐藏标题栏颜色 icon:path.join(__static,'./imgs/icon.

electron-vue自定义标题

qq_59599812的博客

07-04

327

1.在主进程background.js或者main.js中主窗口配置。2.此时顶部的标题不见了，现在需要自己自定义放大，缩小，关闭等操作。3.第二步自己写好后，下面说下向主进程发送命令进行放大，缩小，关闭。4.主进程监听渲染进程发送的指令，下面那部分就是监听的。上面的标题自己使用css html写。

【Electron+Vue】【三】主脚本+自定义标题栏+自定义最小化、最大化、关闭按钮

BMG-Princess

02-19

4365

目录简单介绍 electron基础什么是electron electron 的两个进程（重点）主脚本如何在渲染进程中通讯主进程简单介绍在前四篇介绍了electron+vue的难点，到了真正上手的时候会发现有很多的细节才是真正让人头疼的，网上答案千篇一律，并不能起什么效果，现在就具体开发细节问题来做一下整体说明！ electron基础官方文档什么是electron Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面...

定制 Electron 窗口标题栏

SailingCoder的博客

01-02

2077

对于希望在用户需要时显示窗口控制按钮的情况，可以选择模式。在这种模式下，窗口标题栏默认隐藏，但当用户将鼠标悬停在窗口顶部时，自定义的窗口控制按钮将出现。});});这种方式在提供自定义外观的同时，保持了窗口控制按钮的可访问性，使用户体验更加友好。

vue+Electron,自定义最大化、最小化、关闭窗口的功能

热门推荐

ddx2019的博客

05-21

1万+

简单的理解一下Electron的进程类型——渲染进程和主进程主进程： Electron 运行 package.json 的 main 脚本的进程。渲染进程: 在 web 页面运行的进程。一个 Electron 应用有且只有一个主进程。主进程中运行的脚本通过创建web页面来展示用户界面。每个 Electron 中的 web 页面运行在它自己的渲染进程中。主进程管理所有的web页面和它们对应的渲染进程。每个渲染进程都是独立的，它只关心它所运行的 web 页面。主进程和渲染进程可以相互通信

自定义的 标题栏 electron-vue

05-22

在使用 Electron-Vue 构建应用程序时，可以自定义应用程序窗口的标题栏。以下是一些步骤： 1. 在 `main.js` 文件中，找到 `createWindow` 函数，并将 `frame: false` 改为 `frame: true`。这将启用原生窗口边框。 ...

使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)

11-20

标题中的知识点是使用Electron框架将HTML网页转化为可执行的.exe文件，并且实现特定功能，如全屏显示、隐藏任务栏、Esc键退出程序以及自定义exe图标和文件名。以下是对这些知识点的详细说明： **Electron框架** ...

custom-electron-titlebar：VS Code标题栏上的自定义电子标题栏显示

02-03

自定义电子标题栏 该项目是电子的打字稿库，可让您配置完全可自定义的标题栏。它是电子库，不能在基本网站上使用。安装 npm i custom-electron-titlebar 或使用示例文件夹通过此标题栏初始化基本电子项目。用法步骤1 在渲染器文件或HTML脚本标签中添加： const customTitlebar = require ( 'custom-electron-titlebar' ) ; new customTitlebar . Titlebar ( { backgroundColor : customTitlebar . Color . fromHex ( '#444' ) } ) ; 如果您使用打字稿 import { Titlebar , Color } from 'custom-electron-titlebar' new Titlebar ( { backgroundColor : Color . fromHex ( '#ECECEC' ) } ) ; 参数backgroundColor: Color是必需的，这应该是Color类型。（有关更

[ electron | ipc通信 ] 自定义标题栏，实现最小化、最大化、关闭、全屏

ljw1412的博客

09-08

1833

前置步骤：BrowserWindow 实例化，将 frame 设为 false 创建无边框窗口，即不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。 // 创建浏览器窗口 win = new BrowserWindow({ width: 1200, height: 800, frame: false, webPreferences: { nodeIntegra...

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

weixin_32758097的博客

02-23

543

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

Electron修改窗口标题

qq_43458533的博客

07-20

3073

如题，最近也开始学习electron了，踩了很多坑终于安装成功把脚手架跑起来了，万分激动~ 虽然成功跑了起来，但是想先改点简单的玩一玩，瞅着脚手架给生成的名字非常的不爽于是找了半天资料，自己摸索了摸索发现通过修改 index.ejs 文件中的title标签实现了特此记录一下。 <title>这里改成你想改的名字</title> ...

electron 自定义标题栏（React 二）

qq_34533703的博客

04-17

1295

electron 自定义标题栏

Electron：窗口、窗口标题和边框

读心悦

11-08

1583

当我们设置frame为false的时候，窗口的边框和标题栏消失了，只展示内容区域，我们不能移动窗口、最大化、最小化和关闭窗口。现在需要做的是封装自己的标题栏，这里我把它封装为一个React组件。。import {import {import {主要是设置路由类型，选择的是浏览器路由。

electron 2 - 创建主窗口

ef_ef的博客

05-19

853

主进程,渲染进程的区别主进程是控制整个软件的, 文件通常命名为main.js 一个窗口相当于一个网页, 渲染进程就是网页的JavaScript, 文件通常命名为renderer.js 创建窗口软件大体都由主进程控制, 所以窗口要在main.js中创建 main.js const { app, BrowserWindow } = require('electron) app.on('ready', () => { const mainWindow = new Browse

Electron自定义窗口

dupha的博客

05-17

3289

1.Electron标题栏隐藏，2.Electron窗口控件隐藏或放大 3.Electron标题栏自定义，Electron标题栏样式允许隐藏浏览器窗口的大部分色彩，同时保持系统原生窗口控件完整无损，并可以在的构造器中使用选项来配置。应用 hidden 标题栏样式的结果是隐藏标题栏和全尺寸内容窗口。