alert

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

使用方式

按需引入函式：

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

使用範例：

open

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "警告標題",
      description: "警告說明",
      confirmText: "確定",
      onConfirm: () => console.log("已確認"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

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

Options

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

dialog

confirm