Mint UI 弹出式提示框-Message Box

2021-09-06 15:21 更新
弹出式提示框,有多种交互形式。

引入

import { MessageBox } from 'mint-ui';

例子

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

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

或者传入一个对象

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

此外,​MessageBox​ 还提供了​ alert​、​confirm ​和 ​prompt​ 三个方法,它们都返回一个​ 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 是否显示确认按钮 Boolean true
showCancelButton 是否显示取消按钮 Boolean false
confirmButtonText 确认按钮的文本 String
confirmButtonHighlight 是否将确认按钮的文本加粗显示 Boolean false
confirmButtonClass 确认按钮的类名 String
cancelButtonText 取消按钮的文本 String
cancelButtonHighlight 是否将取消按钮的文本加粗显示 Boolean false
cancelButtonClass 取消按钮的类名 String
closeOnClickModal 是否在点击遮罩时关闭提示光 Boolean true (alert 为 false)
showInput 是否显示一个输入框 Boolean false
inputType 输入框的类型 String 'text'
inputValue 输入框的值 String
inputPlaceholder 输入框的占位符 String


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号