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>