简介
- MessageBox实际是一套对话框组件的概称,包括confirm,msgbox四种方法,适合展示较为简单的内容。
消息提示
- 通过$alert方法在用户要进行某个操作时弹出对话框中断该操作,直到用户确认知晓后才可真正执行。它接收两个参数message和title,表示弹框内容和标题。注意,当窗口被关闭后,该方法默认返回一个Promise对象用于进行后续操作的处理,如不确定浏览器是否支持Promise,可自行引入第三方polyfill或如下例使用回调进行后续处理。
<el-button type="text" @click="open">点击打开Message Box</el-button>
<script>
export default {
methods: {
open(){
this.$alert('这是一段内容','标题名称',
{
//确定按钮的文本
confirmButtonText:'确定',
//回调函数,在点击弹框后执行,action参数是自动传入,代表用户的选择
callback:action => {
this.$message({type:'info',message:`action:${action}`});
}
}
);
},
}
}
</script>
确认消息
- 通过$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;