Electron使用指南——17定制菜单

秒速五厘米 2022-12-03 15:59 169阅读 0赞

本节为大家介绍如何为我们的应用定制一个菜单，让它看起来更像一个原生的桌面端APP。

### 1、载入菜单模块 ###

在 `renderer` 的 `/public/index.html` 里载入菜单模块：

<script>
      const { remote, shell } = require('electron')
    </script>

### 2、定制菜单 ###

修改 `/src/App.vue`，在 `mounted` 里定制菜单：

<script>
    // ...
    
    export default {
      // ...
      mounted() {
        // Menu template
        const template = [
          {
            label: 'Items',
            submenu: [
              {
                label: 'Add New',
                click: () => {
                  this.setModalVisible(true)
                },
                accelerator: 'CmdOrCtrl+O'
              }
            ]
          },
          {
            role: 'editMenu'
          },
          {
            role: 'windowMenu'
          },
          {
            role: 'help',
            submenu: [
              {
                label: 'Learn more',
                click: () => { shell.openExternal('https://github.com/stackacademytv/master-electron') }
              }
            ]
          }
        ]
    
        // Set Mac-specific first menu item
        if (process.platform === 'darwin') {
    
          template.unshift({
            label: remote.app.getName(),
            submenu: [
              { role: 'about' },
              { type: 'separator'},
              { role: 'services' },
              { type: 'separator'},
              { role: 'hide' },
              { role: 'hideothers' },
              { role: 'unhide' },
              { type: 'separator'},
              { role: 'quit' }
            ]
          })
        }
    
        // Build menu
        const menu = remote.Menu.buildFromTemplate(template)
    
        // Set as main app menu
        remote.Menu.setApplicationMenu(menu)
      }
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

柔光的暖阳◎/ 2023年10月06日 14:42/ 0 赞/ 46 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![9b265ee857754954a135efb2ff

拼搏现实的明天。/ 2023年10月06日 14:35/ 0 赞/ 48 阅读

相关 Electron使用指南——17定制菜单

本节为大家介绍如何为我们的应用定制一个菜单，让它看起来更像一个原生的桌面端APP。 1、载入菜单模块在 `renderer` 的 `/public/index.htm

秒速五厘米/ 2022年12月03日 15:59/ 0 赞/ 170 阅读

相关 Electron使用指南——搜索信息

搜索信息的思路：在 `/src/components/Header.vue` 组件里获取到用户从搜索框里的关键字(keyword)，保存在 `Store` 里，再做个 `get

小灰灰/ 2022年12月03日 15:58/ 0 赞/ 202 阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

àì夳堔傛蜴生んèń/ 2022年12月03日 08:45/ 0 赞/ 262 阅读

相关 Electron使用指南——IPC 通信

IPC 通信 1、index.html <!DOCTYPE html> <html> <head> <meta char

今天药忘吃喽~/ 2022年12月02日 00:43/ 0 赞/ 171 阅读

相关 Electron使用指南——特性和技巧

共享API (Shared API) 本节重点讲解 `process`、`screen`、`shell`、`nativeImage`、`clipboard` 几个部分内容

╰+攻爆jí腚メ/ 2022年12月02日 00:43/ 0 赞/ 292 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![format_png][] 单纯使用JavaScr

素颜马尾好姑娘i/ 2022年12月01日 14:08/ 0 赞/ 240 阅读

相关 Electron使用指南 - [02] 搭建 Electron 运行环境

1、安装 Electron npm install electron -S 2、尝试官网的一个案例克隆这仓库 git clone ht

拼搏现实的明天。/ 2022年12月01日 14:07/ 0 赞/ 174 阅读

相关 Electron - Menu 菜单

文章目录 Menu 菜单 Menu 静态方法 menu 实例方法事件 Menu

迷南。/ 2022年10月23日 11:21/ 0 赞/ 239 阅读