沈阳做网站的互联网公司,如何做文化传播公司网站,用闲置的安卓手机做网站服务器,杭州房产透明售房网模拟系统的消息提示框而实现的一套模态对话框组件#xff0c;用于消息提示、确认消息和提交内容。 从场景上说#xff0c;MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt#xff0c;因此适合展示较为简单的内容。如果需要弹出较为复杂的内容#xff0c;还是要… 模拟系统的消息提示框而实现的一套模态对话框组件用于消息提示、确认消息和提交内容。 从场景上说MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt因此适合展示较为简单的内容。如果需要弹出较为复杂的内容还是要使用 Dialog。 1.消息提示
当用户进行操作时会被触发该对话框中断用户操作直到用户确认知晓后才可关闭。
/*调用$alert方法即可打开消息提示它模拟了系统的 alert无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数message和title。值得一提的是窗口被关闭后它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。*/templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$alert(这是一段内容, 标题名称, {confirmButtonText: 确定,callback: action {this.$message({type: info,message: action: ${ action }});}});}}}
/script
2.确认消息
提示用户确认其已经触发的动作并询问是否进行此操作时会用到此对话框。
/*调用$confirm方法即可打开消息提示它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性我们可以传入options作为第三个参数它是一个字面量对象。type字段表明消息类型可以为successerrorinfo和warning无效的设置将会被忽略。注意第二个参数title必须定义为String类型如果是Object会被理解为options。在这里我们用了 Promise 来处理后续响应。*/templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$message({type: success,message: 删除成功!});}).catch(() {this.$message({type: info,message: 已取消删除}); });}}}
/script
3.提交内容
当用户进行操作时会被触发中断用户操作提示用户进行输入的对话框。
/*调用$prompt方法即可打开消息提示它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式或者用inputValidator规定校验函数可以返回Boolean或String返回false或字符串时均表示校验未通过同时返回的字符串相当于定义了inputErrorMessage字段。此外可以用inputPlaceholder字段来定义输入框的占位符。*/templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$prompt(请输入邮箱, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,inputPattern: /[\w!#$%*/?^_{|}~-](?:\.[\w!#$%*/?^_{|}~-])*(?:[\w](?:[\w-]*[\w])?\.)[\w](?:[\w-]*[\w])?/,inputErrorMessage: 邮箱格式不正确}).then(({ value }) {this.$message({type: success,message: 你的邮箱是: value});}).catch(() {this.$message({type: info,message: 取消输入}); });}}}
/script
4.自定义
可自定义配置不同内容。
以上三个方法都是对$msgbox方法的再包装。本例直接调用$msgbox方法使用了showCancelButton字段用于显示取消按钮。另外可使用cancelButtonClass为其添加自定义样式使用cancelButtonText来自定义按钮文本Confirm 按钮也具有相同的字段在文末的字段说明中有完整的字段列表。此例还使用了beforeClose属性它的值是一个方法会在 MessageBox 的实例关闭前被调用同时暂停实例的关闭。它有三个参数action、实例本身和done方法。使用它能够在关闭前对实例进行一些操作比如为确定按钮添加loading状态等此时若需要关闭实例可以调用done方法若在beforeClose中没有调用done则实例不会关闭。templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {const h this.$createElement;this.$msgbox({title: 消息,message: h(p, null, [h(span, null, 内容可以是 ),h(i, { style: color: teal }, VNode)]),showCancelButton: true,confirmButtonText: 确定,cancelButtonText: 取消,beforeClose: (action, instance, done) {if (action confirm) {instance.confirmButtonLoading true;instance.confirmButtonText 执行中...;setTimeout(() {done();setTimeout(() {instance.confirmButtonLoading false;}, 300);}, 3000);} else {done();}}}).then(action {this.$message({type: info,message: action: action});});}}}
/script 弹出层的内容可以是 VNode所以我们能把一些自定义组件传入其中。每次弹出层打开后Vue 会对新老 VNode 节点进行比对然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染当这类问题出现时解决方案是给 VNode 加上一个不相同的 key. 5. 使用 HTML 片段
message 属性支持传入 HTML 片段。
将dangerouslyUseHTMLString属性设置为 truemessage 就会被当作 HTML 片段处理。
templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$alert(strong这是 iHTML/i 片段/strong, HTML 片段, {dangerouslyUseHTMLString: true});}}}
/scriptmessage 属性虽然支持传入 HTML 片段但是在网站上动态渲染任意 HTML 是非常危险的因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下请确保 message 的内容是可信的永远不要将用户提交的内容赋值给 message 属性。 6.区分取消与关闭
有些场景下点击取消按钮与点击关闭按钮有着不同的含义。 默认情况下当用户触发取消点击取消按钮和触发关闭点击关闭按钮或遮罩层、按下 ESC 键时Promise 的 reject 回调和callback回调的参数均为 cancel。如果将distinguishCancelAndClose属性设置为 true则上述两种行为的参数分别为 cancel 和 close。 templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$confirm(检测到未保存的内容是否在离开页面前保存修改, 确认信息, {distinguishCancelAndClose: true,confirmButtonText: 保存,cancelButtonText: 放弃修改}).then(() {this.$message({type: info,message: 保存修改});}).catch(action {this.$message({type: info,message: action cancel? 放弃保存并离开页面: 停留在当前页面})});}}}
/script7.居中布局
内容支持居中布局
将 center 设置为 true 即可开启居中布局
templateel-button typetext clickopen点击打开 Message Box/el-button
/templatescriptexport default {methods: {open() {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,center: true}).then(() {this.$message({type: success,message: 删除成功!});}).catch(() {this.$message({type: info,message: 已取消删除});});}}}
/script8.全局方法
如果你完整引入了 Element它会为 Vue.prototype 添加如下全局方法$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为
$msgbox(options)$alert(message, title, options) 或 $alert(message, options)$confirm(message, title, options) 或 $confirm(message, options)$prompt(message, title, options) 或 $prompt(message, options)
9.单独引用
如果单独引入 MessageBox
import { MessageBox } from element-ui;那么对应于上述四个全局方法的调用方法依次为MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt调用参数与全局方法相同。
