對話框

API 參考

用於開啟和儲存檔案以及訊息對話框的原生系統對話框。

支援平台

此外掛程式需要至少 1.77.2 的 Rust 版本

平台	層級	備註
windows
linux
macos
android		不支援資料夾選擇器
ios		不支援資料夾選擇器

設定

安裝 dialog 外掛程式以開始使用。

自動
手動

使用您的專案套件管理器來新增依賴項

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

在 src-tauri 資料夾中執行以下指令，將外掛程式新增至 Cargo.toml 中的專案依賴項
```
cargo add tauri-plugin-dialog
```

修改 lib.rs 以初始化外掛程式

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

如果您想要在 JavaScript 中建立對話框，也請安裝 npm 套件

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

使用方式

dialog 外掛程式在 JavaScript 和 Rust 中均可用。以下說明如何使用它

在 JavaScript 中

建立「是/否」對話框
建立「確定/取消」對話框
建立訊息對話框
開啟檔案選擇器對話框
儲存檔案對話框

在 Rust 中

建立詢問對話框
建立訊息對話框
建立檔案選擇器對話框

JavaScript

請參閱 JavaScript API 參考中的所有對話框選項。

建立「是/否」對話框

顯示帶有「是」和「否」按鈕的詢問對話框。

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

建立「確定/取消」對話框

顯示帶有「確定」和「取消」按鈕的詢問對話框。

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

建立訊息對話框

顯示帶有「確定」按鈕的訊息對話框。請注意，如果使用者關閉對話框，它將傳回 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' });

開啟檔案選擇器對話框

開啟檔案/目錄選擇對話框。

multiple 選項控制對話框是否允許多重選取，而 directory 則控制是否為目錄選取。

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

儲存檔案對話框

開啟檔案/目錄儲存對話框。

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 參考以查看所有可用選項。

建立詢問對話框

顯示帶有「當然」和「絕對」按鈕的詢問對話框。

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() 代替

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,
    });

建立訊息對話框

顯示帶有「確定」按鈕的訊息對話框。請注意，如果使用者關閉對話框，它將傳回 false。

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

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

如果您需要非阻塞操作，可以使用 show() 代替

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,
    });

建立檔案選擇器對話框

選取檔案

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() 代替

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
    })

儲存檔案

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

或，或者

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
    });

預設權限

此權限集組態了 dialog 外掛程式提供的對話框類型。

已授權的權限

所有對話框類型都已啟用。

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

權限表

識別符	描述
`dialog:allow-ask`	啟用 ask 指令，無需任何預先設定的範圍。
`dialog:deny-ask`	拒絕 ask 指令，無需任何預先設定的範圍。
`dialog:allow-confirm`	啟用 confirm 指令，無需任何預先設定的範圍。
`dialog:deny-confirm`	拒絕 confirm 指令，無需任何預先設定的範圍。
`dialog:allow-message`	啟用 message 指令，無需任何預先設定的範圍。
`dialog:deny-message`	拒絕 message 指令，無需任何預先設定的範圍。
`dialog:allow-open`	啟用 open 指令，無需任何預先設定的範圍。
`dialog:deny-open`	拒絕 open 指令，無需任何預先設定的範圍。
`dialog:allow-save`	啟用 save 指令，無需任何預先設定的範圍。
`dialog:deny-save`	拒絕 save 指令，無需任何預先設定的範圍。