Electron：Menu 自定义菜单的使用、自定义右键菜单、动态创建菜单

const {app, BrowserWindow, ipcMain, dialog, globalShortcut, Menu} = require('electron')
const path = require('path')
const WinState = require('electron-win-state').default

const mainMenu = (args, callback) => {
    return Menu.buildFromTemplate([
        {
            label: 'electron',
            submenu: [
                {
                    label: 'submenu-1',
                },
                {
                    label: 'submenu-2',
                }
            ]
        },
        {
            type: 'separator', // 分割线, 上下两个不同功能添加一个分割线使用
        },
        {
            label: '类型',
            submenu: [
                {
                    label: '选项1',
                    type: 'checkbox'
                },
                {
                    label: '选项2',
                    type: 'checkbox'
                },
                {
                    type: 'separator', // 分割线, 上下两个不同功能添加一个分割线使用
                },
                {
                    label: '单选1',
                    type: 'radio'
                },
                {
                    label: '单选2',
                    type: 'radio'
                },
                {
                    type: 'separator', // 分割线, 上下两个不同功能添加一个分割线使用
                },
                {
                    label: 'windows',
                    type: 'submenu',
                    role: 'windowMenu'
                },
            ]
        },
        // 系统自带的功能role
        {
            label: 'Edit',
            submenu: [
                {
                    role: 'undo'
                },
                {
                    role: 'redo'
                },
                {
                    role: 'copy'
                },
                {
                    role: 'paste'
                },
                {
                    title: '关于',
                    role: 'about'
                }
            ]
        },
        // 系统自带的功能
        {
            label: '动作',
            submenu: [
                {
                    label: 'Devtools',
                    role: 'toggleDevTools'
                },
                {
                    role: 'togglefullscreen'
                }
            ]
        },
        // 给子菜单加图标
        {
            label: '其他',
            submenu: [
                {
                    label: '打开',
                    icon: './open.png',
                    accelerator: 'ctrl + o',
                    click() {}
                }
            ]
        },
    
        // 自定义功能
        {
            label: 'Greet',
            click: () => {
                const answers = ['Yes', 'No', 'Maybe', 'xxxx']
                dialog.showMessageBox({
                    title: args || 'Message box',
                    message: args || 'please select an option',
                    detail: 'Message detail',
                    buttons: answers
                }).then((response) => {
                    console.log(response);
                    callback(response)
                })
            },
            // 设置这个点击的快捷键
            accelerator: 'Shift+Alt+G'
        }
    ])
}
const contextMenu = Menu.buildFromTemplate([
    {
        label: 'item 1',
    },
    {
        role: 'editMenu'
    }
])

const winState = new WinState({
    defaultWidth: 800,
    defaultHeight: 600
})

function createWindow () {
    process.env.LANG = 'zh_CN.UTF-8';

    const win = new BrowserWindow({
        // width: 1000,
        // height: 800,
        x: 50,
        y: 50,
        webPreferences: {
            preload: path.resolve(__dirname, 'preload.js'),
            sandbox: false
        },
        ...winState.winOptions,
    })

    win.loadFile('index.html')

    // 管理win窗口
    winState.manage(win)

    const wc = win.webContents;

    // 点击右键时弹窗菜单
    wc.on('context-menu', (e, params) => {
        contextMenu.popup()
    })

    Menu.setApplicationMenu(mainMenu('主进程给 mainMenu 传数据', () => {
        console.log('mainMenu给主进程传输局');
    }))

}

// 动态创建菜单，点击后触发handleAddMenu事件，直接替换启动项目时的菜单栏

const menuItem = new Menu()
const handleAddMenu = () => {
    // 创建菜单
    const menuFile = new MenuItem({label: '文件', type: 'normal'})
    const menuEdit = new MenuItem({label: '编辑', type: 'normal'})
    const customMenu = new MenuItem({label: '自定义菜单栏', submenu: menuItem})

    // 将创建好的自定义菜单添加至 menu
    const menu = new Menu();
    menu.append(menuFile)
    menu.append(menuEdit)
    menu.append(customMenu)

    // 将menu 放置于 app 中显示
    Menu.setApplicationMenu(menu)
}

// 点击按钮后往 自定义菜单栏 添加菜单
const handleAddSubMenu = () => {
    menuItem.append(new MenuItem({label: 'con', type: 'normal'}))
}

原文地址：https://blog.csdn.net/weixin_50236973/article/details/143730408

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！