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>