Контекстное меню

Управлять отображением контекстного меню позволяют следующие методы из класса Menu:

  • popup([<Объект с опциями>]) — отображает контекстное меню. В необязательном параметре можно передать объект со следующими основными свойствами:
  • window — ссылка на окно. Если свойство не указано, то используется ссылка на окно, находящееся в фокусе;
  • x и y — задают координаты. Если свойства не заданы, то используются координаты курсора;
  • callback — ссылка на функцию, которая будет вызвана при закрытии меню;
  • closePopup([<Окно>]) — закрывает контекстное меню. В необязательном параметре можно указать ссылку на окно. По умолчанию используется ссылка на окно, находящееся в фокусе.

Контекстное меню поддерживает следующие события:

  • menu-will-show — контекстное меню будет отображено;
  • menu-will-close — контекстное меню будет закрыто.

Давайте создадим программу, позволяющую отображать контекстное меню и обрабатывать выбор пунктов из меню. Содержимое основного файла приложения main.js приведено в листинге 5.1, файла index.html — в листинге 5.2, а файла test.js — в листинге 5.3.

Листинг 5.1. Содержимое файла C:\book\e1\main.js

const { app, BrowserWindow, ipcMain, Menu } = require('electron');

let win = null;

function createWindow() {
   win = new BrowserWindow({
      width: 800,
      height: 500,
      webPreferences: {
         nodeIntegration: true,
         contextIsolation: false
      }
   });
   win.webContents.loadFile('index.html');
   win.webContents.openDevTools();
   win.on('closed', () => {
      win = null;
   });
}

app.whenReady().then( () => {
   createWindow();
   app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
} );

app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
      app.quit();
   }
});

ipcMain.on('event-context-menu', (e) => {
   let templateMenu = [
      {
         label: 'Item 1',
         click: () => {
            e.sender.send('event-context-menu-click', 'Item 1');
         }
      },
      {
         label: 'Item 2',
         click: () => {
            e.sender.send('event-context-menu-click', 'Item 2');
         }
      }
   ];
   const menu = Menu.buildFromTemplate(templateMenu);
   menu.on('menu-will-show', () => {
      console.log('menu-will-show');
   });
   menu.on('menu-will-close', () => {
      console.log('menu-will-close');
   });
   menu.popup({
      callback: function() {
         console.log('close popup');
      }
   });
});

Листинг 5.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <title>Контекстное меню</title>
</head>
<body>
   <h1>Контекстное меню</h1>
   <script src="test.js"></script>
</body>
</html>

Листинг 5.3. Содержимое файла C:\book\e1\test.js

const { ipcRenderer } = require('electron');

window.addEventListener('contextmenu', (e) => {
   e.preventDefault();
   ipcRenderer.send('event-context-menu');
});

ipcRenderer.on('event-context-menu-click', (e, item) => {
   console.log(item);
});

Учебник по Electron js
Учебник по Electron js в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов