【Electron】vue+electron应用设置菜单

最新推荐文章于 2024-12-25 16:26:37 发布

原创

最新推荐文章于 2024-12-25 16:26:37 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vue.js #javascript

本文介绍了如何在Electron+Vue应用中自定义菜单，包括应用内菜单、系统托盘菜单和右键菜单的设置。通过使用Menu模块和MenuItem API，实现原生体验，并强调了利用系统内置角色的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

本文主要介绍electron应用如何自定义菜单，以及在哪些地方可以使用Menu模块。一般情况menu只是设置给mac系统的，因为windows系统在应用做了无边框之后，是不会显示应用菜单的（这里Linux暂时不考虑）。点击查看Menu详情

二、适用场景及实施

1.应用内菜单自定义

这个菜单是指的这里

这里主要用到Menu的两个Api，分别是Menu.buildFromTemplate(template)和Menu.setApplicationMenu(menu)。

这里我们这样实现, 首先创建一个ElectronMenu.js文件，用于存放创建菜单。

// ElectronMenu.js
import { app, Menu } from 'electron'
// 设置菜单栏, win表示当前窗口实例
export function createMenu (win) {// darwin表示macOS，这里我们选择对macOS系统的创建应用内菜单if (process.platform === 'darwin') {const template = [{label: '我的超级应用',submenu: [{ label: '关于', ac