MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包

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。

本页目录