房产网站的建设,工程造价信息网官网登录入口,上海微网站制作设计制作,做网站设计最好的公司常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 1.如何使用#xff1f;
Message 在配置上与 Notification 非常类似#xff0c;所以部分 options 在此不做详尽解释#xff0c;可以结合 Notification 的文档理解它们。Element 注… 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 1.如何使用
Message 在配置上与 Notification 非常类似所以部分 options 在此不做详尽解释可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用Message 可以接收一个字符串或一个 VNode 作为参数它会被显示为正文内容。
templateel-button :plaintrue clickopen打开消息提示/el-buttonel-button :plaintrue clickopenVnVNode/el-button
/templatescriptexport default {methods: {open() {this.$message(这是一条消息提示);},openVn() {const h this.$createElement;this.$message({message: h(p, null, [h(span, null, 内容可以是 ),h(i, { style: color: teal }, VNode)])});}}}
/script
2.不同状态
用来显示「成功、警告、消息、错误」类的操作反馈
/*当需要自定义更多属性时Message 也可以接收一个对象为参数。比如设置type字段可以定义不同的状态默认为info。此时正文内容以message的值传入。同时我们也为 Message 的各种 type 注册了方法可以在不传入type字段的情况下像open4那样直接调用。*/templateel-button :plaintrue clickopen2成功/el-buttonel-button :plaintrue clickopen3警告/el-buttonel-button :plaintrue clickopen1消息/el-buttonel-button :plaintrue clickopen4错误/el-button
/templatescriptexport default {methods: {open1() {this.$message(这是一条消息提示);},open2() {this.$message({message: 恭喜你这是一条成功消息,type: success});},open3() {this.$message({message: 警告哦这是一条警告消息,type: warning});},open4() {this.$message.error(错了哦这是一条错误消息);}}}
/script
3.可关闭
可以添加关闭按钮。
//默认的 Message 是不可以被人工关闭的如果需要可手动关闭的 Message可以使用showClose字段。此外和 Notification 一样Message 拥有可控的duration设置0为不会被自动关闭默认为 3000 毫秒。templateel-button :plaintrue clickopen1消息/el-buttonel-button :plaintrue clickopen2成功/el-buttonel-button :plaintrue clickopen3警告/el-buttonel-button :plaintrue clickopen4错误/el-button
/templatescriptexport default {methods: {open1() {this.$message({showClose: true,message: 这是一条消息提示});},open2() {this.$message({showClose: true,message: 恭喜你这是一条成功消息,type: success});},open3() {this.$message({showClose: true,message: 警告哦这是一条警告消息,type: warning});},open4() {this.$message({showClose: true,message: 错了哦这是一条错误消息,type: error});}}}
/script4.文字居中
使用 center 属性让文字水平居中。
templateel-button :plaintrue clickopenCenter文字居中/el-button
/templatescriptexport default {methods: {openCenter() {this.$message({message: 居中的文字,center: true});}}}
/script
5.使用 HTML 片段
message 属性支持传入 HTML 片段
//将dangerouslyUseHTMLString属性设置为 truemessage 就会被当作 HTML 片段处理。templateel-button :plaintrue clickopenHTML使用 HTML 片段/el-button
/templatescriptexport default {methods: {openHTML() {this.$message({dangerouslyUseHTMLString: true,message: strong这是 iHTML/i 片段/strong});}}}
/script message 属性虽然支持传入 HTML 片段但是在网站上动态渲染任意 HTML 是非常危险的因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下请确保 message 的内容是可信的永远不要将用户提交的内容赋值给 message 属性。 6.全局方法
Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 Message。
7.单独引用
单独引入 Message
import { Message } from element-ui;此时调用方法为 Message(options)。我们也为每个 type 定义了各自的方法如 Message.success(options)。并且可以调用 Message.closeAll() 手动关闭所有实例。
