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

自定义写法

MessageBox.confirm('', {
    message: '是否XXX？',
    title: '提示',
    showConfirmButton:true,
    showCancelButton:true,
    cancelButtonClass:'cancelButton',
    confirmButtonClass:'confirmButton',
    confirmButtonText:'确定',
    cancelButtonText:'暂不'
}).then(action => {
    if (action == 'confirm') {//点击确定的回调
    console.log('abc');
    }
}).catch(err => {
    if (err == 'cancel') {//点击暂不的回调
    console.log('123');
    }
});