返回介绍

message-box

发布于 2021-06-25 16:28:59 字数 4561 浏览 877 评论 0 收藏 0

弹出式提示框,有多种交互形式。


引入

import { MessageBox } from 'mint-ui';

例子

以标题与内容字符串为参数进行调用

MessageBox('提示', '操作成功');

或者传入一个对象

MessageBox({
  title: '提示',
  message: '确定执行此操作?',
  showCancelButton: true
});

此外,MessageBox 还提供了 alertconfirmprompt 三个方法,它们都返回一个 Promise

MessageBox.alert(message, title);
MessageBox.alert('操作成功').then(action => {
  ...
});
MessageBox.confirm(message, title);
MessageBox.confirm('确定执行此操作?').then(action => {
  ...
});
MessageBox.prompt(message, title);
MessageBox.prompt('请输入姓名').then(({ value, action }) => {
  ...
});

在 prompt 中,若用户点击了取消按钮,则 Promise 的状态会变为 rejected

API

参数说明类型可选值默认值
title提示框的标题String
message提示框的内容String
showConfirmButton是否显示确认按钮Booleantrue
showCancelButton是否显示取消按钮Booleanfalse
confirmButtonText确认按钮的文本String
confirmButtonHighlight是否将确认按钮的文本加粗显示Booleanfalse
confirmButtonClass确认按钮的类名String
cancelButtonText取消按钮的文本String
cancelButtonHighlight是否将取消按钮的文本加粗显示Booleanfalse
cancelButtonClass取消按钮的类名String
closeOnClickModal是否在点击遮罩时关闭提示光Booleantrue (alert 为 false)
showInput是否显示一个输入框Booleanfalse
inputType输入框的类型String'text'
inputValue输入框的值String
inputPlaceholder输入框的占位符String

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文