您的位置:首页 > 其它

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

GUDUzhongliang 2020-09-04 14:30 337 查看 https://blog.csdn.net/guduzhon

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

1、载入菜单模块

在 

renderer
 的 
/public/index.html
 里载入菜单模块:

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

2、定制菜单

修改 

/src/App.vue
,在 
mounted
 里定制菜单:

[code]<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>
标签: