electron 的Dialog模块

友儿

发布于 2024-03-27 08:21:11

6180

发布于 2024-03-27 08:21:11

文章被收录于专栏：友儿

dialog 模块是主进程模块，它允许我们在 Electron 应用程序中创建各种类型的对话框，包括警告框、信息框、文件选择框等。这些对话框可用于与用户交互，获取输入、展示消息、选择文件等操作。

消息框 (MessageBox)

dialog 模块的 showMessageBox() 和showMessageBoxSync() 方法可以弹出消息框。一般会在渲染进程中想主进程发送信息，然后弹出消息框，这里为了代码演示方便，直接写到主进程了

const { app, BrowserWindow, dialog } = require('electron')

app.on('ready', () => {
    // 创建窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    })
         // 警告框
    dialog.showMessageBox({
        type: 'warning',
        title: '警告',
        message: '这是一个警告框。',
        buttons: ['确定']
    });
        // 信息框
    dialog.showMessageBox({
        type: 'info',
        title: '信息',
        message: '这是一个信息框。',
        buttons: ['确定']
    });
})

dialog.showMessageBox：

这是一个异步方法，不会阻塞主线程，而是通过 Promise 或回调函数来处理用户的响应。
它返回一个 Promise 对象，你可以使用 then 方法来获取用户点击的按钮的索引。
它是非阻塞的，因此在对话框显示期间，应用程序可以继续执行其他操作。
使用它时，代码的执行会继续进行，不会停止在对话框显示期间。

dialog.showMessageBoxSync：

这是一个同步方法，会阻塞主线程直到用户关闭对话框。
它返回一个整数值，表示用户点击的按钮的索引。
它是阻塞式的，因此在对话框显示期间，应用程序的其他部分将无法执行。
使用它时，代码的执行会在对话框关闭之前停止。

各系统之间的差异请参考文档：https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowmessageboxbrowserwindow-options

错误框 (ErrorBox)

错误框用于显示一个错误消息，使用dialog.showErrorBox()

dialog.showErrorBox('发生错误', '发生了一个错误！');

文件选择框

显示选择文件的对话框

dialog.showOpenDialog({
  properties: ['openFile']
}).then(result => {
  console.log(result.filePaths);
}).catch(err => {
  console.log(err);
});

该方法有很多配置项，具体可以参考文档。

文档地址：https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowopendialogbrowserwindow-options

dialog.showOpenDialogSync()

文件保存框

显示保存文件的对话框

dialog.showSaveDialog({
  defaultPath: '~/Documents/myfile.txt'
}).then(result => {
  console.log(result.filePath);
}).catch(err => {
  console.log(err);
});

该方法有很多配置项，具体可以参考文档。

文档地址：https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowsavedialogbrowserwindow-options