dialog

dialog 函数是对 <mdui-dialog> 组件的封装，使用该函数，你无需编写组件的 HTML 代码，就能打开一个对话框。

使用方法

按需导入函数：

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

使用示例：

open

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Dialog Title",
      description: "Dialog description",
      actions: [
        {
          text: "Cancel",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confirmed");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

函数接收一个 Options 对象作为参数；返回值为 <mdui-dialog> 组件实例。

Options

属性名	类型	默认值
`headline`	`string`	-
dialog 的标题
`description`	`string`	-
dialog 的描述文本
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
dialog 中的 body 内容，可以是 HTML 字符串、DOM 元素、或 JQ 对象。
`icon`	`string`	-
dialog 顶部的 Material Icons 图标名
`closeOnEsc`	`boolean`	`false`
是否在按下 ESC 键时，关闭 dialog
`closeOnOverlayClick`	`boolean`	`false`
是否在点击遮罩层时，关闭 dialog
`actions`	`Action[]`	-
底部操作按钮数组
`stackedActions`	`boolean`	`false`
是否垂直排列底部操作按钮
`queue`	`string`	-
队列名称。默认不启用队列，在多次调用该函数时，将同时显示多个 dialog。可在该参数中传入一个队列名称，具有相同队列名称的 dialog 函数，将在上一个 dialog 关闭后才打开下一个 dialog。 `dialog()`、`alert()`、`confirm()`、`prompt()` 这四个函数的队列名称若相同，则也将互相共用同一个队列。
`onOpen`	`(dialog: Dialog) => void`	-
dialog 开始打开时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。
`onOpened`	`(dialog: Dialog) => void`	-
dialog 打开动画完成时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。
`onClose`	`(dialog: Dialog) => void`	-
dialog 开始关闭时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。
`onClosed`	`(dialog: Dialog) => void`	-
dialog 关闭动画完成时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。
`onOverlayClick`	`(dialog: Dialog) => void`	-
点击遮罩层时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。

Action

属性名	类型	默认值
`text`	`string`	-
按钮文本
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
点击按钮时的回调函数。函数参数为 dialog 实例，`this` 也指向 dialog 实例。默认点击按钮后会关闭 dialog；若返回值为 `false`，则不关闭 dialog；若返回值为 promise，则将在 promise 被 resolve 后，关闭 dialog。

jq 工具库

alert