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

本节为大家介绍如何为我们的应用定制一个菜单，让它看起来更像一个原生的桌面端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>