对话框

API Reference

用于打开和保存文件的原生系统对话框以及消息对话框。

¥Native system dialogs for opening and saving files along with message dialogs.

支持的平台

¥Supported Platforms

This plugin requires a Rust version of at least 1.77.2

Platform	Level	Notes
windows
linux
macos
android		Does not support folder picker
ios		Does not support folder picker

设置

¥Setup

安装对话框插件即可开始使用。

¥Install the dialog plugin to get started.

Automatic
Manual

使用项目的包管理器添加依赖：

¥Use your project’s package manager to add the dependency:

npm run tauri add dialog

yarn run tauri add dialog

pnpm tauri add dialog

deno task tauri add dialog

bun tauri add dialog

cargo tauri add dialog

Run the following command in the src-tauri folder to add the plugin to the project’s dependencies in Cargo.toml:
```
cargo add tauri-plugin-dialog
```

Modify lib.rs to initialize the plugin:

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

If you’d like create dialogs in JavaScript, install the npm package as well:

npm install @tauri-apps/plugin-dialog

yarn add @tauri-apps/plugin-dialog

pnpm add @tauri-apps/plugin-dialog

deno add npm:@tauri-apps/plugin-dialog

bun add @tauri-apps/plugin-dialog

使用

¥Usage

对话框插件在 JavaScript 和 Rust 中均可用。以下是使用方法：

¥The dialog plugin is available in both JavaScript and Rust. Here’s how you can use it:

在 JavaScript 中：

¥in JavaScript:

创建是/否对话框

¥Create Yes/No Dialog
创建确定/取消对话框

¥Create Ok/Cancel Dialog
创建消息对话框

¥Create Message Dialog
打开文件选择器对话框

¥Open a File Selector Dialog
保存到文件对话框

¥Save to File Dialog

在 Rust 中：

¥in Rust:

构建询问对话框

¥Build an Ask Dialog
构建消息对话框

¥Build a Message Dialog
构建文件选择器对话框

¥Build a File Selector Dialog

:::note 注意

文件对话框 API 返回 Linux、Windows 和 macOS 上的文件系统路径。

¥The file dialog APIs returns file system paths on Linux, Windows and macOS.

在 iOS 上，将返回 file://<path> URI。

¥On iOS, a file://<path> URIs are returned.

在 Android 上，返回内容 URI。

¥On Android, content URIs are returned.

文件系统插件开箱即用，适用于任何路径格式。

¥The filesystem plugin works with any path format out of the box.

:::

JavaScript

有关此保护的更多信息，请参阅对话框选项、和。

¥See all Dialog Options at the JavaScript API reference.

创建是/否对话框

¥Create Yes/No Dialog

显示带有 Yes 和 No 按钮的问题对话框。

¥Shows a question dialog with Yes and No buttons.

import { ask } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { ask } = window.__TAURI__.dialog;

// Create a Yes/No dialog
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  kind: 'warning',
});

console.log(answer);
// Prints boolean to the console

创建确定/取消对话框

¥Create Ok/Cancel Dialog

显示带有 Ok 和 Cancel 按钮的问题对话框。

¥Shows a question dialog with Ok and Cancel buttons.

import { confirm } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { confirm } = window.__TAURI__.dialog;

// Creates a confirmation Ok/Cancel dialog
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', kind: 'warning' }
);

console.log(confirmation);
// Prints boolean to the console

创建消息对话框

¥Create Message Dialog

显示带有 Ok 按钮的消息对话框。请记住，如果用户关闭对话框，它将返回 false。

¥Shows a message dialog with an Ok button. Keep in mind that if the user closes the dialog it will return false.

import { message } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { message } = window.__TAURI__.dialog;

// Shows message
await message('File not found', { title: 'Tauri', kind: 'error' });

打开文件选择器对话框

¥Open a File Selector Dialog

打开文件/目录选择对话框。

¥Open a file/directory selection dialog.

multiple 选项控制对话框是否允许多项选择，而 directory 则控制是否是目录选择。

¥The multiple option controls whether the dialog allows multiple selection or not, while the directory, whether is a directory selection or not.

import { open } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { open } = window.__TAURI__.dialog;

// Open a dialog
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// Prints file path or URI

保存到文件对话框

¥Save to File Dialog

打开文件/目录保存对话框。

¥Open a file/directory save dialog.

import { save } from '@tauri-apps/plugin-dialog';
// when using `"withGlobalTauri": true`, you may use
// const { save } = window.__TAURI__.dialog;

// Prompt to save a 'My Filter' with extension .png or .jpeg
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// Prints the chosen path

Rust

请参阅 Rust API 参考查看所有可用选项。

¥Refer to the Rust API reference to see all available options.

构建询问对话框

¥Build an Ask Dialog

显示带有 Absolutely 和 Totally 按钮的问题对话框。

¥Shows a question dialog with Absolutely and Totally buttons.

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

let answer = app.dialog()
        .message("Tauri is Awesome")
        .title("Tauri is Awesome")
        .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
        .blocking_show();

如果你需要非阻塞操作，则可以改用 show()：

¥If you need a non blocking operation you can use show() instead:

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

app.dialog()
    .message("Tauri is Awesome")
    .title("Tauri is Awesome")
   .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
    .show(|result| match result {
        true => // do something,
        false =>// do something,
    });

构建消息对话框

¥Build a Message Dialog

显示带有 Ok 按钮的消息对话框。请记住，如果用户关闭对话框，它将返回 false。

¥Shows a message dialog with an Ok button. Keep in mind that if the user closes the dialog it will return false.

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

let ans = app.dialog()
    .message("File not found")
    .kind(MessageDialogKind::Error)
    .title("Warning")
    .blocking_show();

如果你需要非阻塞操作，则可以改用 show()：

¥If you need a non blocking operation you can use show() instead:

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};

app.dialog()
    .message("Tauri is Awesome")
    .kind(MessageDialogKind::Info)
    .title("Information")
    .buttons(MessageDialogButtons::OkCustom("Absolutely"))
    .show(|result| match result {
        true => // do something,
        false => // do something,
    });

构建文件选择器对话框

¥Build a File Selector Dialog

选择文件

¥Pick Files

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();
// return a file_path `Option`, or `None` if the user closes the dialog

如果你需要非阻塞操作，则可以改用 pick_file()：

¥If you need a non blocking operation you can use pick_file() instead:

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // return a file_path `Option`, or `None` if the user closes the dialog
    })

保存文件

¥Save Files

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // do something with the optional file path here
    // the file path is `None` if the user closed the dialog

或者，另外：

¥or, alternatively:

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // return a file_path `Option`, or `None` if the user closes the dialog
    });

Default Permission

This permission set configures the types of dialogs available from the dialog plugin.

Granted Permissions

All dialog types are enabled.

allow-ask
allow-confirm
allow-message
allow-save
allow-open

Permission Table

Identifier	Description
`dialog:allow-ask`	Enables the ask command without any pre-configured scope.
`dialog:deny-ask`	Denies the ask command without any pre-configured scope.
`dialog:allow-confirm`	Enables the confirm command without any pre-configured scope.
`dialog:deny-confirm`	Denies the confirm command without any pre-configured scope.
`dialog:allow-message`	Enables the message command without any pre-configured scope.
`dialog:deny-message`	Denies the message command without any pre-configured scope.
`dialog:allow-open`	Enables the open command without any pre-configured scope.
`dialog:deny-open`	Denies the open command without any pre-configured scope.
`dialog:allow-save`	Enables the save command without any pre-configured scope.
`dialog:deny-save`	Denies the save command without any pre-configured scope.