6. Dialog

刘圣凯
280 阅读4分钟

electron 中的 dialog

Electron中的dialog模块提供了使用系统原生对话框的能力,主要用在主进程中。dialog的常见用法和API如下:

  1. 显示消息框
  • dialog.showMessageBox - 显示消息提示框
  1. 打开文件对话框
  • dialog.showOpenDialog - 选择文件打开
  1. 保存文件对话框
  • dialog.showSaveDialog - 保存文件
  1. 错误框
  • dialog.showErrorBox - 显示错误消息

dialog.showMessageBox

dialog.showMessageBox用于显示消息提示框,它接收一个对象作为参数,这个对象可以包含以下属性:

  • type:消息框的类型,可选值为"none"、"info"、"error"、"question"、"warning",默认为"info"
  • buttons:消息框的按钮,数组类型,可选值为"cancel"、"no"、"ok"、"yes",默认为["OK"]
  • defaultId:默认focus的按钮的索引,Number类型,默认为第一个按钮
  • title:消息框的标题,String类型,默认为空
  • message:消息框的内容,String类型,默认为空
  • detail:消息的额外详细内容,String类型,默认为空
  • checkboxLabel:复选框的标签,String类型,默认无复选框
  • checkboxChecked:复选框的初始状态,Boolean类型,默认为false
  • icon:消息框图标,可为加载的图片文件路径,也可以是系统内置图标名"error"、"question"、"warning",默认不显示图标
  • cancelId:用于取消对话框的按钮的索引,Number类型,默认为第一个按钮
  • noLink:是否隐藏窗口右下角的"How to get help"链接,Boolean类型,默认显示所以通过传入不同的选项可以定制显示不同样式和内容的消息框。

一个常见的用法示例如下:

dialog.showMessageBox({
  type: 'question',
  buttons: ['Yes', 'No'],
  title: 'Confirm',
  message: 'Are you sure you want to delete this file?'
})

dialog.showOpenDialog

dialog.showOpenDialog用于打开文件选择对话框,它接收一个对象作为参数,可以包含以下属性:

  • title:对话框的标题,String
  • defaultPath:对话框默认打开的路径,String
  • buttonLabel:确认按钮的自定义标签,String
  • filters:文件类型过滤器,Array
  • properties:对话框的特性,Array
  • message:对话框的额外消息,String
  • securityScopedBookmarks: macOS sandboxed app选项,Boolean

下面详细解释几个常用参数:

  • properties:

这个参数决定对话框的特性,支持的值有: openFile、openDirectory、multiSelections、showHiddenFiles等

  • filters:

过滤显示指定类型的文件,格式为:[{ name: 'Text Files', extensions: ['txt'] }, { name: 'Images', extensions: ['jpg', 'png'] } ]

  • defaultPath:

默认打开的文件夹路径

  • title:

自定义对话框标题

  • buttonLabel:

自定义确认按钮的文本

通过组合这些参数,可以打开不同需求的文件选择对话框。

一个打开只选择PDF文件的打开文件对话框的用法示例:

dialog.showOpenDialog({
  properties: ['openFile'],
  filters: [
    { name: 'PDF Files', extensions: ['pdf'] }
  ]
})

dialog.showSaveDialog

dialog.showSaveDialog用于打开文件保存对话框,它接收一个对象作为参数,可以包含以下属性:

  • title: 保存对话框的标题,字符串
  • defaultPath: 对话框中默认的保存路径,字符串
  • buttonLabel: 确认按钮的自定义标签,字符串
  • filters: 保存文件类型过滤器,数组
  • message: 对话框的额外消息,字符串
  • nameFieldLabel: 文件名输入框的占位文本,字符串
  • showsTagField: 是否显示标签输入框,布尔值

下面详细解释几个常用参数:

  • defaultPath: 对话框默认的保存文件夹路径

  • filters: 过滤器,例如: [{ name: 'JPEG', extensions: ['jpg', 'jpeg'] }]

  • buttonLabel: 自定义确认按钮的文本

  • message: 对话框下方显示的额外提示信息

  • nameFieldLabel: 文件名输入框的占位符文本

  • showsTagField: 是否显示标签输入框

一个常见的使用示例:

dialog.showSaveDialog({
  title: 'Save Image',
  defaultPath: '/images',
  filters: [
    { name: 'PNG', extensions: ['png'] }
  ],
  buttonLabel: 'Save'
})

dialog.showErrorBox

dialog.showErrorBox用于显示错误信息框,它接收两个参数:

  • title: 错误框的标题,字符串
  • content: 错误框显示的错误内容,字符串

试验

我们修改一下index.html，给他添加四个按钮， 分别处理消息模态框，错误模态框，保存文件模态框以及打开文件模态框， 接着去app.js中给四个按钮绑定好事件，通过消息传递给main.js，在main.js中我们去处理这些操作

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

const winState = new WinState({})

const createWindows = () => {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preLoad.js'),
    },
    ...winState.winOptions,
  })

  win.loadFile('index.html')

  win.webContents.openDevTools()

  winState.manage(win)
}

app.whenReady().then(() => {
  createWindows()
  // 仅 macOS 支持
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindows()
    }
  })
})

app.on('window-all-closed', () => {
  // 对于 Mac 系统， 关闭窗口时并不会直接退出应用， 此时需要我们来手动处理
  if (process.platform === 'darwin') {
    console.log('close')
    app.quit()
  }
})

ipcMain.handle('msg-dialog', (event, data) => {
  dialog
    .showMessageBox({
      type: 'question',
      buttons: ['好的', '取消'],
      title: 'Confirm',
      message: data,
    })
    .then((res) => {
      console.log(res)
    })
})

ipcMain.handle('file-dialog', (event, data) => {
  dialog
    .showOpenDialog({
      buttonLabel: '选择',
      defaultPath: app.getPath('desktop'),
      properties: [
        'multiSelections',
        'createDirectory',
        'openFile',
        'openDirectory',
      ],
    })
    .then((res) => {
      console.log(res)
    })
})

ipcMain.handle('save-file-dialog', (event, data) => {
  dialog.showSaveDialog({
    defaultPath: app.getPath('desktop'),
  }).then((res) => {
    console.log(res)
  })
})

ipcMain.handle('error-dialog', (event, data) => {
  dialog.showErrorBox('错误', data)
})

此时我们的main.js就长这样，我们通过handle去监听了四个按钮给我们发送的消息，同时做出相应的处理， 这一章大家对Dialog 有基本的了解就好， 真正使用到的时候可以去查阅Dialog文档

avatar
文章
阅读
粉丝