alert、confirm

prompt#xff0c;因此适合展示较为简单的内容。

如果需要弹出较为复杂的内容#xff0c;还是要…

模拟系统的消息提示框而实现的一套模态对话框组件用于消息提示、确认消息和提交内容。

从场景上说MessageBox

prompt因此适合展示较为简单的内容。

如果需要弹出较为复杂的内容还是要使用

1.消息提示

当用户进行操作时会被触发该对话框中断用户操作直到用户确认知晓后才可关闭。

ESC

或点击框外关闭。

此例中接收了两个参数message和title。

值得一提的是窗口被关闭后它默认会返回一个Promise对象便于进行后续操作的处理。

若不确定浏览器是否支持Promise可自行引入第三方

polyfill

或像本例一样使用回调进行后续处理。

*/templateel-button

typetext

提示用户确认其已经触发的动作并询问是否进行此操作时会用到此对话框。

Box

组件也拥有极高的定制性我们可以传入options作为第三个参数它是一个字面量对象。

type字段表明消息类型可以为successerrorinfo和warning无效的设置将会被忽略。

注意第二个参数title必须定义为String类型如果是Object会被理解为options。

在这里我们用了

Promise

当用户进行操作时会被触发中断用户操作提示用户进行输入的对话框。

prompt。

可以用inputPattern字段自己规定匹配模式或者用inputValidator规定校验函数可以返回Boolean或String返回false或字符串时均表示校验未通过同时返回的字符串相当于定义了inputErrorMessage字段。

此外可以用inputPlaceholder字段来定义输入框的占位符。

*/templateel-button

typetext

/[\w!#$%*/?^_{|}~-](?:\.[\w!#$%*/?^_{|}~-])*(?:[\w](?:[\w-]*[\w])?\.)[\w](?:[\w-]*[\w])?/,inputErrorMessage:

邮箱格式不正确}).then(({

以上三个方法都是对$msgbox方法的再包装。

本例直接调用$msgbox方法使用了showCancelButton字段用于显示取消按钮。

另外可使用cancelButtonClass为其添加自定义样式使用cancelButtonText来自定义按钮文本Confirm

按钮也具有相同的字段在文末的字段说明中有完整的字段列表。

此例还使用了beforeClose属性它的值是一个方法会在

MessageBox

的实例关闭前被调用同时暂停实例的关闭。

它有三个参数action、实例本身和done方法。

使用它能够在关闭前对实例进行一些操作比如为确定按钮添加loading状态等此时若需要关闭实例可以调用done方法若在beforeClose中没有调用done则实例不会关闭。

templateel-button

typetext

this.$createElement;this.$msgbox({title:

消息,message:

true;instance.confirmButtonText

执行中...;setTimeout(()

VNode所以我们能把一些自定义组件传入其中。

每次弹出层打开后Vue

会对新老

节点进行比对然后将根据比较结果进行最小单位地修改视图。

这也许会造成弹出层内容区域的组件没有重新渲染当这类问题出现时解决方案是给

VNode

默认情况下当用户触发取消点击取消按钮和触发关闭点击关闭按钮或遮罩层、按下

ESC

cancel。

如果将distinguishCancelAndClose属性设置为

cancel

{this.$confirm(检测到未保存的内容是否在离开页面前保存修改,

确认信息,

$msgbox(options)$alert(message,

title,

element-ui;那么对应于上述四个全局方法的调用方法依次为MessageBox,

MessageBox.alert,