codecamp

Mint UI 弹出式提示框-Message Box

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

引入

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


Mint UI 无限滚动指令-Infinite Scroll
Mint UI 操作表-Action Sheet
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }