Element UI三十五MessageBox弹框

简介

• MessageBox实际是一套对话框组件的概称，包括$alert,$confirm,$prompt以及最基础的$msgbox四种方法，适合展示较为简单的内容。

消息提示

• 通过$alert方法在用户要进行某个操作时弹出对话框中断该操作，直到用户确认知晓后才可真正执行。它接收两个参数message和title，表示弹框内容和标题。注意，当窗口被关闭后，该方法默认返回一个Promise对象用于进行后续操作的处理，如不确定浏览器是否支持Promise，可自行引入第三方polyfill或如下例使用回调进行后续处理。

点击打开Message Box

• 

确认消息

• 通过$confirm方法可打开消息确认。除了内容和标题，还可传入options作为第三个参数，其type字段表明消息类型，取值可为success、error、info或warning，其他无效设置将被忽略。注意，第二个参数title必须为String类型，如果是Object则会被理解为options。
• 

提交内容

• 当用户进行操作时弹框提示用户输入某些内容。通过$prompt方法可打开输入提示，同样接收message，title和options三个参数。options对象的inputPattern字段用于自定义匹配模式；或者用inputValidator字段规定校验函数，返回Boolean或String，返回false或字符串（返回字符串的话相当于定义了inputErrorMessage，将显示在输入框下方）均表示校验未通过。此外，可以用inputPlaceholder字段定义输入框的占位符。
• 

自定义

• 以上三个方法都是对$msgbox方法的再包装。它可接收一个options对象，其showCancelButton字段用于显示取消按钮，cancelButtonClass字段可为取消按钮添加自定义样式，cancelButtonText用于自定义按钮文本；beforeClose的值为一个方法，会在MessageBox的实例关闭前被调用，先暂停实例的关闭来展示一下按钮的变化等，如将确定按钮转变为loading状态等，它接收三个参数action，实例本身和done方法，如果loading一段时间后需要关闭实例的话，需要再调用done方法，否则实例将不会关闭。
• 

使用HTML片段

• 通过将dangerouslyUserHTMLString字段设置为true，message字段就会被当做HTML片段处理。
• 

区分取消与关闭

• 有些场景下，取消按钮与关闭按钮有着不同的意义。默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下ESC键）时，Promise的reject回调或callback回调的action参数均为’cancle’。如果将distinguishCancelAndClose字段设置为true，则上述两种行为的action将分别为’cancel’和’close’。
• 

居中布局

• 通过将center字段设置为true可开启居中布局：
• 

全局方法

• 以上展示的是完整引入Element时，在Vue实例中全局调用的方式，调用参数为：

$msgbox(options);
$alert(message,title,options)或$alert(message,options);
$confirm(message,title,options)或$confirm(message,options);
$prompt(message,title,options)或$prompt(message,options);

单独引用

//单独引入
import {MessageBox} from 'element-ui';
//调用方法，参数与全局方法同
MessageBox;
MessageBox.alert;
MessageBox.confirm;
MessageBox.prompt;

• options对象的字段：

• 

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”