confirm

confirm 函式是對 <mdui-dialog> 元件的封裝，在功能上可用來取代系統原生的 window.confirm 函式。使用該函式，你無需編寫元件的 HTML 程式碼，就能開啟一個確認框。

使用方式

按需引入函式：

import { confirm } from 'mdui/functions/confirm.js';

使用範例：

open

<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { confirm } from "mdui/functions/confirm.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    confirm({
      headline: "確認標題",
      description: "確認說明",
      confirmText: "確定",
      cancelText: "取消",
      onConfirm: () => console.log("已確認"),
      onCancel: () => console.log("已取消"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

函式接收一個 Options 物件作為參數；回傳值為 Promise，如果透過點擊確定按鈕關閉，則 Promise 會被解析（resolve），如果透過其他方式關閉，則 Promise 會被拒絕（reject）。

Options

屬性名稱	類型	預設值
`headline`	`string`	-
confirm 的標題
`description`	`string`	-
confirm 的說明文字
`icon`	`string`	-
confirm 頂部的 Material Icons 圖示名稱
`closeOnEsc`	`boolean`	`false`
是否在按下 ESC 鍵時，關閉 confirm
`closeOnOverlayClick`	`boolean`	`false`
是否在點擊遮罩層時，關閉 confirm
`confirmText`	`string`	`OK`
確認按鈕的文字
`cancelText`	`string`	`Cancel`
取消按鈕的文字
`stackedActions`	`boolean`	`false`
是否垂直排列底部操作按鈕
`queue`	`string`	-
佇列名稱。預設不啟用佇列，在多次呼叫該函式時，將同時顯示多個 confirm。可在該參數中傳入一個佇列名稱，具有相同佇列名稱的 confirm 函式，將在上一個 confirm 關閉後才開啟下一個 confirm。 `dialog()`、`alert()`、`confirm()`、`prompt()` 這四個函式的佇列名稱若相同，則也將互相共用同一個佇列。
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
點擊確認按鈕時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。預設點擊確認按鈕後會關閉 confirm；若回傳值為 `false`，則不關閉 confirm；若回傳值為 promise，則將在 promise 被解析（resolve）後，關閉 confirm。
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
點擊取消按鈕時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。預設點擊取消按鈕後會關閉 confirm；若回傳值為 `false`，則不關閉 confirm；若回傳值為 promise，則將在 promise 被解析（resolve）後，關閉 confirm。
`onOpen`	`(dialog: Dialog) => void`	-
confirm 開始開啟時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOpened`	`(dialog: Dialog) => void`	-
confirm 開啟動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClose`	`(dialog: Dialog) => void`	-
confirm 開始關閉時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onClosed`	`(dialog: Dialog) => void`	-
confirm 關閉動畫完成時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。
`onOverlayClick`	`(dialog: Dialog) => void`	-
點擊遮罩層時的回呼函式。函式參數為 dialog 實例，`this` 也指向 dialog 實例。

alert

prompt