prompt

prompt 函数是对 <mdui-dialog> 组件的封装,该函数在功能上用于代替系统原生的 window.prompt 函数。使用该函数,你无需编写组件的 HTML 代码,就能打开一个可输入文本的对话框。

使用方法

按需导入函数:

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

使用示例:

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

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

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

  button.addEventListener("click", () => {
    prompt({
      headline: "Prompt Title",
      description: "Prompt description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: (value) => console.log("confirmed: " + value),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

函数的参数为 Options 对象;返回值为 Promise,如果是通过点击确定按钮关闭对话框,则 Promise 会被 resolve,resolve 的参数为输入框的值,如果是通过其他方式关闭对话框,则 Promise 会被 reject。

Options

属性名 类型 默认值
headline string -
prompt 的标题
description string -
prompt 的描述文本
icon string -
prompt 顶部的 Material Icons 图标名
closeOnEsc boolean false
是否在按下 ESC 键时,关闭 prompt
closeOnOverlayClick boolean false
是否在点击遮罩层时,关闭 prompt
confirmText string OK
确认按钮的文本
cancelText string Cancel
取消按钮的文本
stackedActions boolean false
是否垂直排列底部操作按钮
queue string -

队列名称。

默认不启用队列,在多次调用该函数时,将同时显示多个 prompt。

可在该参数中传入一个队列名称,具有相同队列名称的 prompt 函数,将在上一个 prompt 关闭后才打开下一个 prompt。

dialog()alert()confirm()prompt() 这四个函数的队列名称若相同,则也将互相共用同一个队列。

onConfirm (value: string, dialog: Dialog) => void | boolean | Promise<void> -

点击确认按钮时的回调函数。

函数参数为输入框的值和 dialog 实例,this 指向 dialog 实例。

默认点击确认按钮后会关闭 prompt;若返回值为 false,则不关闭 prompt;若返回值为 promise,则将在 promise 被 resolve 后,关闭 prompt。

onCancel (value: string, dialog: Dialog) => void | boolean | Promise<void> -

点击取消按钮时的回调函数。

函数参数为输入框的值和 dialog 实例,this 指向 dialog 实例。

默认点击取消按钮后会关闭 prompt;若返回值为 false,则不关闭 prompt;若返回值为 promise,则将在 promise 被 resolve 后,关闭 prompt。

onOpen (dialog: Dialog) => void -

prompt 开始打开时的回调函数。

函数参数为 dialog 实例,this 也指向 dialog 实例。

onOpened (dialog: Dialog) => void -

prompt 打开动画完成时的回调函数。

函数参数为 dialog 实例,this 也指向 dialog 实例。

onClose (dialog: Dialog) => void -

prompt 开始关闭时的回调函数。

函数参数为 dialog 实例,this 也指向 dialog 实例。

onClosed (dialog: Dialog) => void -

prompt 关闭动画完成时的回调函数。

函数参数为 dialog 实例,this 也指向 dialog 实例。

onOverlayClick (dialog: Dialog) => void -

点击遮罩层时的回调函数。

函数参数为 dialog 实例,this 也指向 dialog 实例。

validator (value: string) => boolean | string | Promise<void> -

输入框的验证函数,参数为输入框的值。this 指向 TextField 实例。

将在浏览器原生验证 API 验证通过后,再使用该函数进行验证。

可以返回 boolean 值,为 false 时表示验证未通过,为 true 时表示验证通过。

也可以返回字符串,字符串不为空时表示验证未通过,同时返回的字符串将用作错误提示。

也可以返回 Promise,被 resolve 表示验证通过,被 reject 表示验证未通过,同时拒绝原因将用作错误提示。

textFieldOptions Partial<TextField> -
prompt 内部的输入框为 <mdui-text-field> 组件。可在该参数中设置 <mdui-text-field> 组件的参数。
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 图标组件库