您的位置:58脚本 > electron dialog Electron dialog 模块

electron dialog Electron dialog 模块

2023-03-19 01:32 Electron中文文档

electron dialog Electron dialog 模块

electron dialog

Electron Dialog 是 Electron 应用程序中的一个重要组件,它可以帮助开发者创建和显示各种对话框,以便与用户进行交互。它是一个轻量级的 JavaScript 库,可以在 Electron 应用中使用,并且提供了一系列的 API 来帮助开发者创建和显示各种对话框。

Electron Dialog 提供了多种不同的对话框,包括警告、错误、信息、文件选择、文本输入、进度条和其他多种对话框。它还可以让开发者自定义对话框的样式和内容,并根据需要显示不同的回调函数。

// 使用 electron dialog 显示一个信息对话框
const { dialog } = require('electron')
dialog.showMessageBox({
  type: 'info', // 对话框的类型(info, error, warning 等)
  title: 'Hello World', // 对话框标题
  message: 'This is a message box' // 对话框内容
})

Electron dialog 模块

dialog 模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验.

对话框例子,展示了选择文件和目录:

var win = ...;  // BrowserWindow in which to show the dialog
const dialog = require("electron").dialog;
console.log(dialog.showOpenDialog({ properties: [ "openFile", "openDirectory", "multiSelections" ]}));

OS X 上的注意事项: 如果你想像sheets一样展示对话框,只需要在browserWindow 参数中提供一个 BrowserWindow 的引用对象.

方法

dialog 模块有以下方法:

dialog.showOpenDialog([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)
  • options Object
    • title String
    • defaultPath String
    • filters Array
    • properties Array - 包含了对话框的特性值, 可以包含 openFileopenDirectorymultiSelections and createDirectory
  • callback Function (可选)

成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined.

filters 当需要限定用户的行为的时候,指定一个文件数组给用户展示或选择. 例如:

{
  filters: [
    { name: "Images", extensions: ["jpg", "png", "gif"] },
    { name: "Movies", extensions: ["mkv", "avi", "mp4"] },
    { name: "Custom File Type", extensions: ["as"] },
    { name: "All Files", extensions: ["*"] }
  ]
}

extensions 数组应当只包含扩展名,不应该包含通配符或"."号 (例如 "png" 正确,但是 ".png"  "*.png" 不正确). 展示全部文件的话, 使用 "*" 通配符 (不支持其他通配符).

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(filenames) 展示.

注意: 在 Windows 和 Linux ,一个打开的 dialog 不能既是文件选择框又是目录选择框, 所以如果在这些平台上设置 properties 的值为 ["openFile", "openDirectory"] , 将展示一个目录选择框.

dialog.showSaveDialog([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)
  • options Object
    • title String
    • defaultPath String
    • filters Array
  • callback Function (可选)

成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined.

filters 指定展示一个文件类型数组, 例子 dialog.showOpenDialog .

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(filenames) 展示.

dialog.showMessageBox([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)
  • options Object
    • type String - 可以是 "none", "info", "error", "question"  "warning". 在 Windows, "question" 与 "info" 展示图标相同, 除非你使用 "icon" 参数.
    • buttons Array - buttons 内容,数组.
    • defaultId Integer - 在message box 对话框打开的时候,设置默认button选中,值为在 buttons 数组中的button索引.
    • title String - message box 的标题,一些平台不显示.
    • message String - message box 内容.
    • detail String - 额外信息.
    • icon NativeImage
    • cancelId Integer - 当用户关闭对话框的时候,不是通过点击对话框的button,就返回值.默认值为对应 "cancel" 或 "no" 标签button 的索引值, 或者如果没有这种button,就返回0. 在 OS X 和 Windows 上, "Cancel" button 的索引值将一直是 cancelId, 不管之前是不是特别指出的.
    • noLink Boolean - 在 Windows ,Electron 将尝试识别哪个button 是普通 button (如 "Cancel" 或 "Yes"), 然后再对话框中以链接命令(command links)方式展现其它的 button . 这能让对话框展示得很炫酷.如果你不喜欢这种效果,你可以设置 noLink  true.
  • callback Function

展示 message box, 它会阻塞进程,直到 message box 关闭为止.返回点击按钮的索引值.

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(response) 展示.

dialog.showErrorBox(title, content)

展示一个传统的包含错误信息的对话框.

+

 app 模块触发 ready 事件之前,这个 api 可以被安全调用,通常它被用来在启动的早期阶段报告错误. 在 Linux 上,如果在 app 模块触发 ready 事件之前调用,message 将会被触发显示stderr,并且没有实际GUI 框显示.


可使用的修饰符
  • Command 或者 Cmd 
  • Control 或者 Ctrl 
  • CommandOrControl 或者 CmdOrCtrl 
  • Alt
  • Option
  • AltGr
  • Shift
  • Super

可使用的键盘符

  • 0 - 9 (0 到 9)
  • A - Z (A 到 Z)
  • F1 - F24 (F1 到 F24)
  • 标点符号: ~, !, @, #, $, 等.
  • Plus
  • Space
  • Tab
  • Backspace
  • Delete
  • Insert
  • Return (or Enter as alias)
  • Up, Down, Left and Right (箭头)
  • Home 和 End 
  • PageUp 和 PageDown
  • Escape 或者 Esc
  • VolumeUp, VolumeDown 和 VolumeMute
  • MediaNextTrack, MediaPreviousTrack, MediaStop 和 MediaPlayPause
  • PrintScreen


阅读全文
以上是58脚本为你收集整理的electron dialog Electron dialog 模块全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS