8 Dialog

  3 分钟阅读  

原文链接: https://tauri.app/plugin/dialog/

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

支持的平台

平台支持程度说明
Windows完整支持
Linux完整支持
macOS完整支持
Android部分支持
iOS部分支持

设置

自动

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

1

npm run tauri add dialog

1

yarn run tauri add dialog

1

pnpm tauri add dialog

1

deno task tauri add dialog

1

bun tauri add dialog

1

cargo tauri add dialog

手动

  1. 在 src-tauri 文件夹中运行以下命令，把插件加入 Cargo.toml 里的项目依赖：

    1

    cargo add tauri-plugin-dialog

  2. 修改 lib.rs 初始化插件：

    1
2
3
4
5
6
7

    #[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");
}

  3. 用你偏好的 JavaScript 包管理器安装 JavaScript 端绑定：

1

npm install @tauri-apps/plugin-dialog

1

yarn add @tauri-apps/plugin-dialog

1

pnpm add @tauri-apps/plugin-dialog

1

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

1

bun add @tauri-apps/plugin-dialog

用法

dialog 插件在 JavaScript 和 Rust 中都可以使用。用法如下：

在 JavaScript 中：

在 Rust 中：

JavaScript

所有 Dialog 选项见 JavaScript API 参考。

创建 Yes/No 对话框

显示一个带 Yes 和 No 按钮的询问对话框。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { ask } from '@tauri-apps/plugin-dialog';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { ask } = window.__TAURI__.dialog;

// 创建一个 Yes/No 对话框
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  kind: 'warning',
});

console.log(answer);
// 会在控制台打印布尔值

创建 Ok/Cancel 对话框

显示一个带 Ok 和 Cancel 按钮的询问对话框。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { confirm } from '@tauri-apps/plugin-dialog';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { confirm } = window.__TAURI__.dialog;

// 创建一个 Ok/Cancel 确认对话框
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', kind: 'warning' }
);

console.log(confirmation);
// 会在控制台打印布尔值

创建消息对话框

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

1
2
3
4
5
6

import { message } from '@tauri-apps/plugin-dialog';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { message } = window.__TAURI__.dialog;

// 显示消息
await message('File not found', { title: 'Tauri', kind: 'error' });

打开文件选择对话框

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { open } from '@tauri-apps/plugin-dialog';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { open } = window.__TAURI__.dialog;

// 打开一个对话框
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// 打印文件路径或 URI

保存到文件对话框

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { save } from '@tauri-apps/plugin-dialog';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { save } = window.__TAURI__.dialog;

// 提示保存一个扩展名为 .png 或 .jpeg 的 'My Filter'
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// 打印所选择的路径

Rust

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

构建询问对话框

显示一个带 Absolutely 和 Totally 按钮的询问对话框。

1
2
3
4
5
6
7

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()：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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 => // 做点什么，
        false =>// 做点什么，
    });

构建消息对话框

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

1
2
3
4
5
6
7

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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 => // 做点什么，
        false => // 做点什么，
    });

构建文件选择对话框

选取文件
1
2
3
4

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();
// 返回 `Option` 类型的 file_path；如果用户关闭对话框则为 `None`

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

1
2
3
4
5

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // 返回 `Option` 类型的 file_path；如果用户关闭对话框则为 `None`
    })
保存文件
1
2
3
4
5
6
7
8
9

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // 在这里处理可选的文件路径
    // 如果用户关闭了对话框，文件路径为 `None`

或者：

1
2
3
4
5
6
7
8

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // 返回 `Option` 类型的 file_path；如果用户关闭了对话框则为 `None`
    });
最后修改 September 26, 2026: 更新 (630b11f59)