confirm

configm 函数是对 <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: "Confirm Title",
      description: "Confirm description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: () => console.log("confirmed"),
      onCancel: () => console.log("canceled"),
    });
  });
</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 实例。

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库