当前位置: 首页 > news >正文

electron-vite【实战】自定义标题栏【组件封装】(含异形标题栏,指定区域拖拽,窗口置顶,窗口最小化,窗口最大化,取消最大化,隐藏窗口到托盘等)

效果预览

在这里插入图片描述

技术要点

透明背景

src/main/index.ts 的 new BrowserWindow 中添加

    transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框

仅图标和标题部分可拖拽

在这里插入图片描述
仅图标和标题部分添加样式 drag

.drag {-webkit-app-region: drag;
}

图标与标题栏的融合

  • 标题栏的背景色采用图标的背景色
bg-[#0baaf5]
  • 标题栏添加顶部的外边距,值为图标的半径
mt-30px

图标的样式如下:

<img :src="icon" alt="logo" class="fixed h-60px top-[0px] drag" />

窗口置顶

在这里插入图片描述

      <Iconv-if="ifTop"icon="stash:pin-thumbtack-solid":class="iconClassString"@click="cancle_top"/><Icon v-else icon="stash:pin-thumbtack" :class="iconClassString" @click="top" />
const ifTop = ref(false)// 窗口置顶
function top() {window.electron.ipcRenderer.send('top')ifTop.value = true
}function cancle_top() {window.electron.ipcRenderer.send('cancle_top')ifTop.value = false
}

src/main/index.ts 中

  ipcMain.on('top', () => {mainWindow.setAlwaysOnTop(true)})ipcMain.on('cancle_top', () => {mainWindow.setAlwaysOnTop(false)})

窗口最小化

在这里插入图片描述

 <Icon icon="qlementine-icons:windows-minimize-16" :class="iconClassString" @click="min" />
function min() {window.electron.ipcRenderer.send('min')
}

src/main/index.ts 中

  ipcMain.on('min', () => {mainWindow.minimize()})

窗口最大化 / 取消最大化

在这里插入图片描述
在这里插入图片描述

      <Iconv-if="ifMax"icon="qlementine-icons:windows-unmaximize-16":class="iconClassString"@click="cancel_max"/><Iconv-elseicon="qlementine-icons:windows-maximize-16":class="iconClassString"@click="max"/>
const ifMax = ref(false)function max() {window.electron.ipcRenderer.send('max')
}function cancel_max() {window.electron.ipcRenderer.send('cancel_max')
}window.electron.ipcRenderer.on('unmaximize', () => {ifMax.value = false
})window.electron.ipcRenderer.on('maximize', () => {ifMax.value = true
})

src/main/index.ts 中

  ipcMain.on('max', () => {mainWindow.maximize()})ipcMain.on('cancel_max', () => {mainWindow.unmaximize()})

因将窗口拖拽到屏幕边缘时,会自动触发最大化,调整窗口大小会退出最大化,则需监听窗口最大化和退出最大化事件,由主进程通知渲染进程状态,以便切换图标。[ 不适应于本范例,因本范例隐藏了 frame ]

  // 窗口变为最大化状态mainWindow.on('maximize', () => {mainWindow.webContents.send('maximize')})// 窗口从最大化状态退出mainWindow.on('unmaximize', () => {mainWindow.webContents.send('unmaximize')})

隐藏窗口到托盘

在这里插入图片描述

<Icon icon="si:close-fill" :class="iconClassString" @click="hide" />
function hide() {window.electron.ipcRenderer.send('hide')
}

src/main/index.ts 中

  ipcMain.on('hide', () => {// 使窗口不显示在任务栏中mainWindow.setSkipTaskbar(true)mainWindow.hide()})

代码实现

src/renderer/src/components/TitleBar.vue

<script setup lang="ts">
import icon from '../../../../resources/icon.png'
const props = defineProps({title: {type: String}
})function hide() {window.electron.ipcRenderer.send('hide')
}const ifTop = ref(false)// 窗口置顶
function top() {window.electron.ipcRenderer.send('top')ifTop.value = true
}function cancle_top() {window.electron.ipcRenderer.send('cancle_top')ifTop.value = false
}function min() {window.electron.ipcRenderer.send('min')
}const ifMax = ref(false)function max() {window.electron.ipcRenderer.send('max')
}function cancel_max() {window.electron.ipcRenderer.send('cancel_max')
}window.electron.ipcRenderer.on('unmaximize', () => {ifMax.value = false
})window.electron.ipcRenderer.on('maximize', () => {ifMax.value = true
})const iconClassString = 'cursor-pointer hover:bg-blue-500 block h-full px-2'
</script><template><img :src="icon" alt="logo" class="fixed h-60px top-[0px] drag" /><div class="flex items-center bg-[#0baaf5] text-white h-30px mt-30px"><div class="drag flex-1 pl-70px font-bold text-white">{{ props.title }}</div><div class="flex h-full"><Iconv-if="ifTop"icon="stash:pin-thumbtack-solid":class="iconClassString"@click="cancle_top"/><Icon v-else icon="stash:pin-thumbtack" :class="iconClassString" @click="top" /><Icon icon="qlementine-icons:windows-minimize-16" :class="iconClassString" @click="min" /><Iconv-if="ifMax"icon="qlementine-icons:windows-unmaximize-16":class="iconClassString"@click="cancel_max"/><Iconv-elseicon="qlementine-icons:windows-maximize-16":class="iconClassString"@click="max"/><Icon icon="si:close-fill" :class="iconClassString" @click="hide" /></div></div>
</template>

页面使用

<TitleBar title="邀请函" />

src/main/index.ts

import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'function createWindow(): void {const mainWindow = new BrowserWindow({// 自定义图标icon: icon,// 自定义窗口宽度width: 360,// 自定义窗口高度height: 430,//默认隐藏窗口show: false,// 隐藏窗口标题栏titleBarStyle: 'hidden',// 隐藏默认菜单autoHideMenuBar: true,// 不可改变窗口大小resizable: false,// 不可改变窗口大小maximizable: false,transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})// 托盘const tray = new Tray(icon)const contextMenu = [{label: '退出',click: function () {app.exit()}}]const menu = Menu.buildFromTemplate(contextMenu)tray.setToolTip('EC编程俱乐部')tray.setContextMenu(menu)tray.on('click', () => {// 使窗口显示在任务栏中mainWindow.setSkipTaskbar(false)mainWindow.show()})// IPC通信ipcMain.on('showPage_home', () => {// 窗口可调整大小mainWindow.setResizable(true)mainWindow.setSize(800, 720)// 窗口居中mainWindow.center()// 窗口可最大化mainWindow.setMaximizable(true)})ipcMain.on('top', () => {mainWindow.setAlwaysOnTop(true)})ipcMain.on('cancle_top', () => {mainWindow.setAlwaysOnTop(false)})ipcMain.on('hide', () => {// 使窗口不显示在任务栏中mainWindow.setSkipTaskbar(true)mainWindow.hide()})ipcMain.on('min', () => {mainWindow.minimize()})ipcMain.on('max', () => {mainWindow.maximize()})ipcMain.on('cancel_max', () => {mainWindow.unmaximize()})mainWindow.on('ready-to-show', () => {// 自定义标题mainWindow.setTitle('EC编程俱乐部')mainWindow.show()})// 窗口变为最大化状态mainWindow.on('maximize', () => {mainWindow.webContents.send('maximize')})// 窗口从最大化状态退出mainWindow.on('unmaximize', () => {mainWindow.webContents.send('unmaximize')})mainWindow.webContents.setWindowOpenHandler((details) => {shell.openExternal(details.url)return { action: 'deny' }})if (is.dev && process.env['ELECTRON_RENDERER_URL']) {mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])} else {mainWindow.loadFile(join(__dirname, '../renderer/index.html'))}
}app.whenReady().then(() => {// Set app user model id for windowselectronApp.setAppUserModelId('com.electron')app.on('browser-window-created', (_, window) => {optimizer.watchWindowShortcuts(window)})createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})ipcMain.on('quit', () => {app.quit()
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

相关文章:

electron-vite【实战】自定义标题栏【组件封装】(含异形标题栏,指定区域拖拽,窗口置顶,窗口最小化,窗口最大化,取消最大化,隐藏窗口到托盘等)

效果预览 技术要点 透明背景 src/main/index.ts 的 new BrowserWindow 中添加 transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框仅图标和标题部分可拖拽 仅图标和标题部分添加样式 drag .drag {-webkit-app-region: drag; }图标与标题栏的融合 标题栏的…...

vue2 项目webpack 4升5

项目背景 公司项目需要将进行微前端改造.主应用和子应用会需要共享依赖,考虑使用模块联邦进行依赖共享. 由于模块联邦要升级到webpack 5才能用,所以老项目要从webpack 4升级到webpack 5 实现思路 原来的项目用的是vue-cli 3,查了一下可以vue-cli 5用的就是webpack 5,所以可以…...

前端开发性能监控中的数据采集与性能调优方法

&#x1f31f; 前端开发性能监控中的数据采集与性能调优方法 &#x1f4d6; 前言 在现代 Web 应用中&#xff0c;性能是用户体验的关键因素之一。性能问题不仅会影响用户满意度&#xff0c;还可能导致业务损失。如何高效地监控前端性能并进行性能调优&#xff0c;成为每个开发…...

S32K324 Stack异常分析及解决方案

文章目录 前言正向排查尝试反向排查问题原因分析问题解决处理总结前言 在项目开发过程中,在一次软件变更时,调整了task优先级之后导致应用层软件中的float数据经常性的变为NAN,导致应用层功能失效。本文记录下这个bug的分析及解决过程。 正向排查尝试 由于问题复现的概率…...

[创业之路-202]:任正非管理华为的思想与毛泽东管理党、军队、国家的思想的相似性与差异性

目录 一、相似性 1、指导思想 2、管理策略 3、危机意识与自我否定 4、理想主义与奋斗精神 二、差异性 1、哲学基础与思想倾向 2、管理方法与策略 3、组织文化与价值观 一、相似性 任正非管理华为的思想与毛泽东管理党、军队、国家的思想在多个方面存在相似性。 以下…...

SAP PP ECN CSAP_MAT_BOM_MAINTAIN

刚开始的时候ECN总是加不上&#xff0c; 参考kimi给出的案例 点击链接查看和 Kimi 智能助手的对话 https://kimi.moonshot.cn/share/cth1ipmqvl7f04qkggdg 效果 加上了 FUNCTION ZPBOM_PLM2SAP. *"------------------------------------------------------------------…...

html中实用标签dl dt dd(有些小众的标签 但是很好用)

背景描述 html <dl> <dt> <dd>是一组合标签&#xff0c;他们与ol li、ul li标签很相似 但是他却是没有默认前缀并且有缩进的标签 使用方式与table表格的标签一致 使用方式 dt和dd是放于dl标签内&#xff0c;dt与dd处于dl下相同级。就是dt不能放入dd内&am…...

ONES 功能上新|ONES Copilot、ONES Wiki 新功能一览

ONES Copilot 可基于工作项的标题、描述、属性信息&#xff0c;对工作项产生的动态和评论生成总结。 针对不同类型的工作项&#xff0c;总结输出的内容有对应的侧重点。 应用场景&#xff1a; 在一些流程步骤复杂、上下游参与成员角色丰富的场景中&#xff0c;工作项动态往往会…...

实现Python将csv数据导入到Neo4j

目录 一、获取数据集 1.1 获取数据集 1.2 以“记事本”方式打开文件 1.3 另存为“UTF-8”格式文件 1.4 选择“是” 二、 打开Neo4j并运行 2.1 创建新的Neo4j数据库 2.2 分别设置数据库名和密码 ​编辑 2.3 启动Neo4j数据库 2.4 打开Neo4j数据库 2.5 运行查看该数据库…...

QML Rectangle组件

文章目录 前言主体**简单的矩形****渐变的矩形****带边框的矩形****圆角矩形****圆形 & 圆环** 总结 前言 在 QML 中&#xff0c;Rectangle 是一个常见且非常实用的元素&#xff0c;它允许开发者轻松创建矩形形状的图形。通过调整 Rectangle 的多种属性&#xff0c;我们不…...

uniapp开发app,cover-view不能隐藏,使用v-if,v-show都不行的解决办法

先上解决方案 在最后多写一个v-else <cover-view class"point-info" v-if"selectedPoint"><cover-view class"info-content"><cover-view class"info-item">。。。</cover-view><cover-view class"i…...

用adb命令给APP做压力测试,有什么不同?

压力测试 app做压力测试目的是模拟用户在使用软件时随意向软件发出指令&#xff0c;例如操作app的点击&#xff0c;滑动&#xff0c;返回等一系列随机事件&#xff0c;来检测app的承受能力 第一步&#xff1a;手机安装包需要待测的app 第二步&#xff1a;输入adb start-ser…...

netcore 集成Prometheus

一、安装包 <ItemGroup><PackageReference Include"prometheus-net" Version"8.2.1" /><PackageReference Include"prometheus-net.AspNetCore" Version"8.2.1" /> </ItemGroup> 二、添加代码 #region Pro…...

同城外卖系统源码扩展指南:搭建海外外卖APP平台详解

本篇文章&#xff0c;笔者将探讨如何基于同城外卖系统源码&#xff0c;搭建适合不同国家的海外外卖APP平台&#xff0c;涵盖多语言支持、支付接口对接、本地化适配等方面的实践经验和技术要点。 一、确定目标市场与用户需求 在开发海外外卖APP平台之前&#xff0c;首先需要深…...

JavaScript 中常见内置对象的知识点及示例总结

一、String&#xff08;字符串&#xff09;对象 知识点&#xff1a; 用于处理文本数据&#xff0c;它有许多内置的属性和方法来操作字符串&#xff0c;比如获取字符串长度、提取子字符串、替换字符等。字符串在 JavaScript 中是不可变的&#xff0c;即一旦创建&#xff0c;就不…...

CSSmodule的作用是什么

CSS Modules的作用主要体现在以下几个方面&#xff1a; 1. 解决全局样式污染问题 在传统的CSS管理方式中&#xff0c;样式定义通常是全局的&#xff0c;这很容易导致全局样式污染。当多个组件或页面共享同一个样式时&#xff0c;可能会出现样式冲突和覆盖的情况&#xff0c;从…...

python\shell\c++语法对比

语法区别举例&#xff1a; itempythonshellc变量定义a 10a10int a 10数组定义arr[1, add, 3]arr(1 a hello) declare -A arr([a]1 [b]2)int arr[] {1, 2, 3}if条件判断 if xxx: xxx elif xxx: xxx else: xxx if [ expressions ];then xxx e…...

优先队列【东北大学oj数据结构9-3】C++

优先队列 优先级队列是一种数据结构&#xff0c;其中保存了一组数据 S&#xff0c;其中每个元素都有一个键&#xff0c;并执行以下操作&#xff1a; insert(S, k)&#xff1a;将元素k插入集合S extractMax(S)&#xff1a;从S中取出S中key最大的元素并返回其值 创建一个程序&am…...

圣诞快乐(h5 css js(圣诞树))

一&#xff0c;整体设计思路 圣诞树h5&#xff08;简易&#xff09; 1.页面布局与样式&#xff1a; 页面使用了全屏的黑色背景&#xff0c;中央显示圣诞树&#xff0c;树形由三层绿色的三角形组成&#xff0c;每一层的大小逐渐变小。树干是一个棕色的矩形&#xff0c;位于三角…...

基于MATLAB的图像增强

目录 一、背景及意义介绍背景图像采集过程中的局限性 意义 二、概述三、代码结构及说明&#xff08;一&#xff09;整体结构&#xff08;二&#xff09;亮度增强部分&#xff08;三&#xff09;对比度增强部分&#xff08;四&#xff09;锐度增强部分 四、复现步骤&#xff08;…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...