Electron应用使用alert弹窗，点击确认后页面失去焦点，输入框点击不了

背景：

在用electron开发一个小工具时，使用alert弹窗，点击确认后，鼠标点不到应用中的输入框了，需要点击应用之外的地方再点进来才可以。

但是在渲染进程中引入electron的dialog，像这样 const dialog = require('electron').remote。我这样使用是会报错的，会显示dialog为null,故只能另寻方法。

解决办法：

使用@electron/remote模块，这是一个官方推荐的替代品，但是不推荐用于大型或者性能敏感的应用。

使用方法：

1、安装@electron/remote:

pnpm install @electron/remote

2、在主进程中初始化它

const { app, BrowserWindow } = require('electron');
const remoteMain = require('@electron/remote/main');
remoteMain.initialize();

app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: false, // 如果你需要在 preload 脚本中使用 remote，你需要关闭 context isolation
    }
  });

  remoteMain.enable(mainWindow.webContents);
});

3、在渲染进程中使用

// 渲染进程
const { dialog } = require('@electron/remote');

dialog.showMessageBox({
  message: "这是一个消息",
  buttons: ["OK"]
}).then(result => {
  if (result.response === 0) { // OK button
    // 用户点击确认后的操作
  }
});

这样使用后就不会出现点击确认后会失去焦点啦。

同样也能替换confirm弹窗，像这样：

// 渲染器进程
const { dialog } = require('@electron/remote');

dialog.showMessageBox({
  type: 'question',  // 使用'question'图标
  buttons: ["取消", "确认"],  // 定义两个按钮
  defaultId: 1,  // 设置默认按钮（0是左边的按钮，1是右边的按钮）
  title: '确认',  // 对话框标题
  message: '你确定要进行这个操作吗？',  // 对话框内容
}).then(result => {
  if (result.response === 1) { // 确认按钮（根据buttons数组的索引）
    // 用户点击了确认
    console.log("用户确认操作");
  } else {
    // 用户点击了取消或关闭了对话框
    console.log("用户取消操作");
  }
});