Electron 保存对话框和消息对话框的原理与操作方法

2023-09-20 06:44:15

前言

在上一期教程中，我们学习了如何使用Electron创建窗口和菜单，为我们的桌面应用奠定了基础。在本期教程中，我们将继续深入学习Electron，重点介绍保存对话框和消息对话框的操作方法。

保存对话框

保存对话框是一个允许用户选择文件保存位置的对话框。它通常用于让用户保存编辑过的文件或下载的文件。在Electron中，我们可以使用dialog.showSaveDialog()方法来打开保存对话框。

const { dialog } = require('electron')

// 打开保存对话框
const result = dialog.showSaveDialog({
  title: '保存文件',
  defaultPath: '/Users/username/Desktop',
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Text Files', extensions: ['txt', 'md'] },
  ],
})

// 处理结果
if (result.canceled) {
  // 用户取消了保存操作
} else {
  // 用户选择了保存文件的位置
  const filePath = result.filePath
  // 将文件保存到指定位置
}

消息对话框

消息对话框是一个显示消息并等待用户输入的对话框。它通常用于向用户显示错误信息、警告信息或确认信息。在Electron中，我们可以使用dialog.showMessageBox()方法来打开消息对话框。

const { dialog } = require('electron')

// 打开消息对话框
const result = dialog.showMessageBox({
  title: '确认',
  message: '您确定要删除此文件吗？',
  buttons: ['确定', '取消'],
})

// 处理结果
if (result.response === 0) {
  // 用户点击了“确定”按钮
} else {
  // 用户点击了“取消”按钮
}