electron【基础篇三】

更多菜单参数，可查询electron官网：https://www.electronjs.org/zh/docs/latest/api/menu

1.自定义菜单

const { app, BrowserWindow, Menu } = require("electron");
  // 自定义菜单
  const menuTemp = [
    {
      label: "文件",
      click: () => {
        // 自定义的点击事件
        console.log("点击了文件");
      },
    },

    {
      label: "编辑", // 自定义的二级菜单
      submenu: [
        { label: "编辑1" },
        {type: "separator"}, // 自定义分割线
        { label: "编辑2" },
        { label: "编辑3" },
      ],
    },
  ];
  // 构建菜单
  const menu = Menu.buildFromTemplate(menuTemp);
  // 实例化自定义菜单添加到页面
  Menu.setApplicationMenu(menu);

2.菜单角色及类型

    {
      label:'系统功能',
      submenu:[
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
      ]
    },
    {
      label:'多选',
      submenu:[
        {label:'选项1', type:'checkbox'},
        {label:'选项2', type:'checkbox'},
        {label:'选项3', type:'checkbox'},
        {label:'选项4', type:'checkbox'}
      ]
    },
    {
      label:'单选',
      submenu:[
        {label:'男', type:'radio'},
        {label:'女', type:'radio'}
      ]
    }

3.动态创建菜单

const remote = require("@electron/remote");
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
window.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    // 创建菜单
    const menuFile = new MenuItem({ label: "文件", type: "normal" });
    // 将菜单添加
    const menu = new Menu();
    menu.append(menuFile);
    // 菜单显示
    Menu.setApplicationMenu(menu);
  });
});

4.自定义右键菜单

const remote = require("@electron/remote");
const Menu = remote.Menu;
const contenxtTem = [
  { label: "code" },
  { label: "编辑" },
  { label: "删除" },
  { label: "复制" },
  {
    label: "其他",
    submenu: [
      {
        label: "copy",
        click: () => {
          console.log("copy");
        },
      },
    ],
  },
];
const menu = Menu.buildFromTemplate(contenxtTem);
window.addEventListener("DOMContentLoaded", () => {
  window.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    menu.popup({ window: remote.getCurrentWebContents() });
  });
});