ElementUI 消息提示组件Message

您所在的位置：网站首页 › message怎么写 › ElementUI 消息提示组件Message

ElementUI 消息提示组件Message

2024-06-23 05:16| 来源: 网络整理| 查看: 265

目录官方地址应用场景基本用法通知类型偏移量使用HTML代码片段开启关闭按钮文字内容居中自定义图标iconClassonCloseclose实例方法全局引入单独引用Options方法

官方地址

https://element.eleme.io/#/zh-CN/component/notification

应用场景

常用于主动操作后的反馈提示

基本用法 $message()接受一个对象，message，设置通知的正文，接受一个String或者VNodeduration，控制关闭的间隔，接受Number，单位ms，默认3000 特别的，设置为0，表示不会自动关闭打开消息提示 VNode open() { this.$message('这是一条消息提示') }, openVN() { const h = this.$createElement; this.$message({ message: h('p', null, [ h('strong', null, '内容可以是'), h('i', {style: 'color: teal'}, 'VNode') ]), }) }, 通知类型

通知类型由type声明

successinfowarningerror

或者

$message.success$message.info$message.warning$message.error 成功消息警告错误 // 调用方式一，type open19() { this.$message({ message: '这是一条成功的消息', type: 'success' }) }, open20() { this.$message({ message: '这是一条消息提示', type: 'info' }) }, // 调用方式二，this.$message.warning open21() { this.$message.warning({ message: '这是一条警告消息' }) }, open22() { this.$message.error({ message: '这是一条错误消息' }) }, 偏移量

偏移量offset,设置Message组件具体屏幕顶部的具体注意在同一时刻，所有的 Message实例应当具有一个相同的偏移量。

成功 open23() { this.$message.success({ message: '距离顶部200px', offset: 200, }) }, 使用HTML代码片段 message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在dangerouslyUseHTMLString打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。成功 open24() { this.$message({ message: '使用HTML代码片段', dangerouslyUseHTMLString: true, type: 'info' }) }, 开启关闭按钮

关闭按钮的显示与否由showClose指定

开启关闭按钮 open25() { this.$message({ message: '开启关闭按钮', type: 'info', showClose: true, }) }, 文字内容居中

文字内容居中由center指定

文字内容居中 open27() { this.$message({ message: '内容居中', type: 'success', center: true, }) }, 自定义图标iconClass

跟notification组件有点区别，message组件的iconClass会覆盖type，而且也不会继承它的情境色

自定义图标 open14() { this.$notify({ title: 'Success', message: '这是一条成功的消息', iconClass: 'el-icon-delete', // 如果设置了type，iconClass会覆盖它，并且继承它的情境色 type: 'success', }) }, onClose

onClose，组件关闭时的回调函数

onClose指定关闭时的回调函数 open30() { this.$message.success({ message: 'onClose指定关闭时的回调函数', duration: 3000, onClose: ()=>console.log('关闭啦'), }) }, close实例方法

调用 Message或 this.$message 会返回当前Message 的实例。如果需要手动关闭实例，可以调用它的close方法。

close实例方法 open31() { let closed = this.$message({ message: 'close实例方法', duration: 0, }); setTimeout(()=>closed.close(), 1000); } 全局引入

ElementUI在Vue.prototype中注册了全局方法$message，所以在Vue实例中可以采用this.$message方式调用Message组件

单独引用

import {Message} from 'element-ui; 此时调用方法为Message(options)，也为每个type定义了各自的方法，如Message.success(options)，并且可以调用Message.closeAll()手动关闭所有实例

Options 参数说明类型可选值默认值message消息文字string / VNode——type主题stringsuccess/warning/info/errorinfoiconClass自定义图标的类名，会覆盖 typestring——dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理boolean—falsecustomClass自定义类名string——duration显示时间, 毫秒。设为 0 则不会自动关闭number—3000showClose是否显示关闭按钮boolean—falsecenter文字是否居中boolean—falseonClose关闭时的回调函数, 参数为被关闭的 message 实例function——offsetMessage 距离窗口顶部的偏移量number—20 方法

调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名说明close关闭当前的 Message

【本文地址】

ElementUI 消息提示组件Message

ElementUI 消息提示组件Message

今日新闻

推荐新闻