尧图网页设计 
Element Plus MessageVue 3 轻量反馈组件完整指南【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 的Message消息提示用于在用户操作后给出即时的轻量反馈与Notification通知的核心区别在于Message 属于交互触发的被动反馈而 Notification 常用于系统级的被动通知。本文以 docs/en-US/component/message.md 官方文档为骨架结合 packages/components/message 目录下的真实源码从基础用法、五种类型、HTML 渲染、合并分组、全局方法到底层实现原理逐一展开。读完你将掌握ElMessage的全部配置项、三种调用姿势字符串 / VNode / 函数、App 上下文继承技巧以及grouping、placement、closeAll等进阶能力的实际用法。基础用法Message 默认显示在视口顶部3 秒后自动消失。你可以通过placement属性控制出现的位置。调用方式与 Notification 高度相似Element Plus 已在全局注册了$message方法因此在任意 Vue 实例中可以直接使用template div classflex flex-wrap gap-1 el-button :plaintrue clickopenShow message/el-button el-button :plaintrue clickopenVnVNode/el-button /div /template script langts setup import { h } from vue import { ElMessage } from element-plus const open () { ElMessage(This is a message.) } const openVn () { ElMessage({ message: h(p, { style: line-height: 1; font-size: 14px }, [ h(span, null, Message can be ), h(i, { style: color: teal }, VNode), ]), }) } /script完整示例见 docs/examples/message/basic.vue。message参数可以接受字符串、VNode 或返回 VNode 的函数。从 src/method.ts 的实现可以看到当参数不是对象即字符串 / VNode / 函数时会被自动归一化为{ message: params }形式的 optionsconst options: MessageOptions !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params其中函数形式() VNode在创建虚拟节点时被作为默认插槽渲染见 src/method.ts。消息类型TypesMessage 支持 Success、Warning、Info、Error 四种经典反馈类型并在 ^(2.9.11) 起新增了primary类型。当需要更多定制时可以传入对象参数通过type字段指定类型默认值为info此时正文通过message字段传入。template div classflex flex-wrap gap-1 el-button :plaintrue clickopen5Primary/el-button el-button :plaintrue clickopen2Success/el-button el-button :plaintrue clickopen3Warning/el-button el-button :plaintrue clickopen1Info/el-button el-button :plaintrue clickopen4Error/el-button /div /template script langts setup import { ElMessage } from element-plus const open1 () { ElMessage(This is a info message.) } const open2 () { ElMessage({ message: Congrats, this is a success message., type: success, }) } const open3 () { ElMessage({ message: Warning, this is a warning message., type: warning, }) } const open4 () { ElMessage.error(Oops, this is a error message.) } const open5 () { ElMessage.primary(This is a primary message.) } /script完整示例见 docs/examples/message/different-types.vue。源码中通过遍历messageTypes为每种类型注册了快捷方法见 src/method.tsexport const messageTypes [ primary, success, info, warning, error, ] as const因此你可以直接调用ElMessage.success(options)、ElMessage.error(options)等无需再传type。在类型层面Message函数对象被定义为MessageFn { primary; success; warning; info; error }见 src/message.ts。每种类型对应的默认图标由TypeComponentsMap提供见 src/message.vue若显式传入icon属性则会覆盖类型默认图标。纯色样式Plain ^(2.6.3)设置plain为true可以让消息使用纯色背景无填充色的浅色风格ElMessage({ message: This is a plain message., plain: true, })示例见 docs/examples/message/plain.vue。该属性在模板中通过ns.is(plain, plain)生成对应修饰类见 src/message.vue。可关闭Closable默认的 Message 无法手动关闭。如需可关闭消息设置showClose字段即可。与 Notification 相同duration控制展示时长默认 3000ms设为0时不会自动消失。ElMessage({ message: This is a closable message., showClose: true, duration: 0, // 不自动关闭 })示例见 docs/examples/message/closable.vue。关闭按钮在模板中渲染为右侧的Close /图标见 src/message.vue。此外从 src/message.vue 可以看到按下Esc 键也会关闭消息鼠标悬停时计时器暂停mouseenterclearTimer/mouseleavestartTimer离开后继续计时见 src/message.vue。使用 HTML 字符串message支持 HTML 字符串开启方式为设置dangerouslyUseHTMLString为trueElMessage({ message: strongThis is iHTML/i/strong, dangerouslyUseHTMLString: true, })示例见 docs/examples/message/raw-html.vue。源码中的渲染逻辑在 src/message.vuep v-if!dangerouslyUseHTMLString || $slots.default :classns.e(content) slot{{ message }}/slot /p !-- Caution here, message couldve been compromised, never use users input as message -- p v-else :classns.e(content) v-htmlmessage /⚠️ 安全警告虽然message属性支持 HTML 字符串但在网站上动态渲染任意 HTML 极易引发 XSS 攻击。合并分组Grouping设置grouping为true后相同内容的message会被合并为一条并通过右上角的角标数字类似 Badge展示重复次数const open () { ElMessage({ message: This is a message., grouping: true, type: success, }) }示例见 docs/examples/message/grouping.vue。合并逻辑位于 src/method.ts当新消息与当前 placement 下已存在实例的message内容一致时不再新建实例而是将已有实例的repeatNum加一并更新类型if (normalized.grouping instances.length) { const instance instances.find( ({ vnode: vm }) vm.props?.message normalized.message ) if (instance) { instance.props.repeatNum! 1 instance.props.type normalized.type return instance.handler } }repeatNum在模板中通过el-badge :valuerepeatNum展示见 src/message.vue其角标颜色由类型映射得出error映射为danger。注意VNode 类型的 message 不支持 grouping因为 VNode 对象无法可靠地比较内容相等性。位置控制Placement ^(2.11.0)placement用于控制消息出现的位置共支持六种取值默认显示在顶部居中placement说明top顶部居中默认top-left左上角top-right右上角bottom底部居中bottom-left左下角bottom-right右下角ElMessage({ message: This is a message from the ${placement}, type, placement, })完整示例见 docs/examples/message/placement.vue。源码中messagePlacement常量与默认值定义于 src/message.tsexport const messagePlacement [ top, top-left, top-right, bottom, bottom-left, bottom-right, ] as const export const MESSAGE_DEFAULT_PLACEMENT top在 src/method.ts 中normalizePlacement会依次执行使用全局配置 → 使用默认值top→ 校验合法性若传入非法值会输出警告并回退到top。不同 placement 的实例被存放在独立的数组中placementInstances[placement]见 src/instance.ts因此六个方向的消息互不干扰、各自独立堆叠。每个 placement 下的消息之间默认保持 16px 间距见 src/instance.ts 的getOffsetOrSpace。全局方法Element Plus 通过app.config.globalProperties注册了全局方法$message。这是由 index.ts 中的withInstallFunction(Message, $message)完成的因此在 Vue 实例内部可直接使用this.$message(...)Options API或模板中的$message(...)在script setup中通常直接导入ElMessage使用。局部引入import { ElMessage } from element-plus局部引入后请使用ElMessage(options)的方式调用并为不同类型注册了便捷方法例如ElMessage.success(options)。除返回实例外ElMessage还提供两个批量关闭能力ElMessage.closeAll() // 关闭所有实例 ElMessage.closeAll(type?) // 可选地只关闭指定类型如 ElMessage.closeAll(success) ElMessage.closeAllByPlacement(position) // 关闭指定位置placement的所有实例closeAll的实现遍历所有 placement 的实例数组为避免遍历中修改数组先做拷贝并可传入type精确过滤见 src/method.ts。App 上下文继承 ^(2.0.3)Message 构造函数接受可选的第二个参数context即 App 上下文用于将当前应用的上下文注入消息实例从而继承应用的全部属性如全局配置、插件注入等import { getCurrentInstance } from vue import { ElMessage } from element-plus // in your setup method const { appContext } getCurrentInstance()! ElMessage({}, appContext)提示如果你通过插件全局注册了 ElMessage即调用app.use(ElementPlus)或app.use(ElMessage)它会自动继承应用上下文无需手动传参。底层实现中创建 VNode 时会执行vnode.appContext context || message._context见 src/method.ts且模块末尾维护了一个message._context供全局注册时写入。全局配置Config Provider 联动Message 的默认行为可以通过 config-provider 的message配置项进行全局定制。ConfigProvider会监听其messageprop 的变化并同步写入messageConfig全局对象见 config-provider.ts。MessageConfigContext支持以下字段见 src/message.ts字段类型说明maxnumber同一时间最多显示的消息条数groupingboolean是否默认合并相同内容消息durationnumber默认展示时长毫秒offsetnumber距视口边缘的距离showCloseboolean是否显示关闭按钮plainboolean是否使用纯色样式placementstring默认位置el-config-provider :message{ max: 3, duration: 2000, placement: bottom-right, } App / /el-config-provider在 method.ts 中这些全局配置会在每次调用时被应用只有当单次调用未显式指定时全局值才会生效如duration仅在等于默认值 3000 时才会被全局值覆盖而max限制会在创建新实例前检查当前实例数量见 method.ts超出后本次调用将静默忽略。Options API 一览以下是ElMessage/$message支持的完整配置项即 src/message.ts 中messageDefaults的展开说明名称说明类型默认值message消息文本string/VNode/() VNodetype消息类型primary (2.9.11) \| success \| warning \| info \| errorinfoplain^(2.6.3)是否使用纯色样式booleanfalseicon自定义图标组件会覆盖type默认图标string/Component—dangerouslyUseHTMLString是否将message视为 HTML 字符串booleanfalsecustomClassMessage 自定义类名stringduration展示时长毫秒设为0则不自动关闭number3000showClose是否显示关闭按钮booleanfalseonClose关闭回调参数为消息实例Function—offset距视口边缘的距离top系为顶部距离bottom系为底部距离number16placement^(2.11.0)消息位置top \| top-left \| top-right \| bottom \| bottom-left \| bottom-righttopappendTo消息挂载的根元素默认document.bodyCSSSelector/HTMLElement—grouping合并相同内容的消息VNode 类型不支持booleanfalserepeatNum重复次数类似角标配合grouping使用时的初始值number1方法与返回实例Message和this.$message调用后会返回当前 Message 实例手动关闭可调用实例上的close方法方法说明类型close关闭该 Message() voidconst handler ElMessage({ message: This message will be closed manually., duration: 0, }) // 手动关闭 handler.close()关于appendTo与offset的细节appendTo支持 CSS 选择器字符串或 HTMLElement。在 method.ts 的normalizeAppendTo中字符串会先通过document.querySelector解析若解析结果不是 HTMLElement会输出ElMessage警告并回退到document.body。同方向堆叠时每条消息的实际offset会基于前一条消息底部高度动态计算getLastOffsetgetOffsetOrSpace见 src/instance.ts保证多消息之间不会重叠消息容器的zIndex由全局 z-index 管理器统一分配见 src/message.vue。底层运行机制从源码结构看Message 的完整调用链路可归纳为入口index.ts 通过withInstallFunction将Message函数注册为全局$message归一化method.ts 的normalizeOptions将字符串 / VNode / 函数参数包装为 options并合并默认值、校验appendTo与placement、应用全局配置实例管理instance.ts 按 placement 维护响应式实例数组支撑 grouping 去重、offset 堆叠与 closeAll渲染message.vue 通过createVNoderender挂载到目标容器组件内部负责过渡动画、自动关闭计时、Esc 关闭、角标与图标渲染并在销毁时执行render(null, container)避免内存泄漏见 method.ts。整个模块不依赖固定的 DOM 插槽而是命令式地动态创建与销毁这也正是它与普通声明式组件在使用体验上的本质区别调用即展示、返回即可控。Message 相关的单元测试位于tests/message.test.ts 与tests/message-manager.test.tsx覆盖了类型方法、duration、grouping、placement 与 closeAll 等核心行为是深入理解组件边界行为时值得阅读的参考。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Element Plus Message：Vue 3 轻量反馈组件完整指南
Element Plus MessageVue 3 轻量反馈组件完整指南【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 的Message消息提示用于在用户操作后给出即时的轻量反馈与Notification通知的核心区别在于Message 属于交互触发的被动反馈而 Notification 常用于系统级的被动通知。本文以 docs/en-US/component/message.md 官方文档为骨架结合 packages/components/message 目录下的真实源码从基础用法、五种类型、HTML 渲染、合并分组、全局方法到底层实现原理逐一展开。读完你将掌握ElMessage的全部配置项、三种调用姿势字符串 / VNode / 函数、App 上下文继承技巧以及grouping、placement、closeAll等进阶能力的实际用法。基础用法Message 默认显示在视口顶部3 秒后自动消失。你可以通过placement属性控制出现的位置。调用方式与 Notification 高度相似Element Plus 已在全局注册了$message方法因此在任意 Vue 实例中可以直接使用template div classflex flex-wrap gap-1 el-button :plaintrue clickopenShow message/el-button el-button :plaintrue clickopenVnVNode/el-button /div /template script langts setup import { h } from vue import { ElMessage } from element-plus const open () { ElMessage(This is a message.) } const openVn () { ElMessage({ message: h(p, { style: line-height: 1; font-size: 14px }, [ h(span, null, Message can be ), h(i, { style: color: teal }, VNode), ]), }) } /script完整示例见 docs/examples/message/basic.vue。message参数可以接受字符串、VNode 或返回 VNode 的函数。从 src/method.ts 的实现可以看到当参数不是对象即字符串 / VNode / 函数时会被自动归一化为{ message: params }形式的 optionsconst options: MessageOptions !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params其中函数形式() VNode在创建虚拟节点时被作为默认插槽渲染见 src/method.ts。消息类型TypesMessage 支持 Success、Warning、Info、Error 四种经典反馈类型并在 ^(2.9.11) 起新增了primary类型。当需要更多定制时可以传入对象参数通过type字段指定类型默认值为info此时正文通过message字段传入。template div classflex flex-wrap gap-1 el-button :plaintrue clickopen5Primary/el-button el-button :plaintrue clickopen2Success/el-button el-button :plaintrue clickopen3Warning/el-button el-button :plaintrue clickopen1Info/el-button el-button :plaintrue clickopen4Error/el-button /div /template script langts setup import { ElMessage } from element-plus const open1 () { ElMessage(This is a info message.) } const open2 () { ElMessage({ message: Congrats, this is a success message., type: success, }) } const open3 () { ElMessage({ message: Warning, this is a warning message., type: warning, }) } const open4 () { ElMessage.error(Oops, this is a error message.) } const open5 () { ElMessage.primary(This is a primary message.) } /script完整示例见 docs/examples/message/different-types.vue。源码中通过遍历messageTypes为每种类型注册了快捷方法见 src/method.tsexport const messageTypes [ primary, success, info, warning, error, ] as const因此你可以直接调用ElMessage.success(options)、ElMessage.error(options)等无需再传type。在类型层面Message函数对象被定义为MessageFn { primary; success; warning; info; error }见 src/message.ts。每种类型对应的默认图标由TypeComponentsMap提供见 src/message.vue若显式传入icon属性则会覆盖类型默认图标。纯色样式Plain ^(2.6.3)设置plain为true可以让消息使用纯色背景无填充色的浅色风格ElMessage({ message: This is a plain message., plain: true, })示例见 docs/examples/message/plain.vue。该属性在模板中通过ns.is(plain, plain)生成对应修饰类见 src/message.vue。可关闭Closable默认的 Message 无法手动关闭。如需可关闭消息设置showClose字段即可。与 Notification 相同duration控制展示时长默认 3000ms设为0时不会自动消失。ElMessage({ message: This is a closable message., showClose: true, duration: 0, // 不自动关闭 })示例见 docs/examples/message/closable.vue。关闭按钮在模板中渲染为右侧的Close /图标见 src/message.vue。此外从 src/message.vue 可以看到按下Esc 键也会关闭消息鼠标悬停时计时器暂停mouseenterclearTimer/mouseleavestartTimer离开后继续计时见 src/message.vue。使用 HTML 字符串message支持 HTML 字符串开启方式为设置dangerouslyUseHTMLString为trueElMessage({ message: strongThis is iHTML/i/strong, dangerouslyUseHTMLString: true, })示例见 docs/examples/message/raw-html.vue。源码中的渲染逻辑在 src/message.vuep v-if!dangerouslyUseHTMLString || $slots.default :classns.e(content) slot{{ message }}/slot /p !-- Caution here, message couldve been compromised, never use users input as message -- p v-else :classns.e(content) v-htmlmessage /⚠️ 安全警告虽然message属性支持 HTML 字符串但在网站上动态渲染任意 HTML 极易引发 XSS 攻击。合并分组Grouping设置grouping为true后相同内容的message会被合并为一条并通过右上角的角标数字类似 Badge展示重复次数const open () { ElMessage({ message: This is a message., grouping: true, type: success, }) }示例见 docs/examples/message/grouping.vue。合并逻辑位于 src/method.ts当新消息与当前 placement 下已存在实例的message内容一致时不再新建实例而是将已有实例的repeatNum加一并更新类型if (normalized.grouping instances.length) { const instance instances.find( ({ vnode: vm }) vm.props?.message normalized.message ) if (instance) { instance.props.repeatNum! 1 instance.props.type normalized.type return instance.handler } }repeatNum在模板中通过el-badge :valuerepeatNum展示见 src/message.vue其角标颜色由类型映射得出error映射为danger。注意VNode 类型的 message 不支持 grouping因为 VNode 对象无法可靠地比较内容相等性。位置控制Placement ^(2.11.0)placement用于控制消息出现的位置共支持六种取值默认显示在顶部居中placement说明top顶部居中默认top-left左上角top-right右上角bottom底部居中bottom-left左下角bottom-right右下角ElMessage({ message: This is a message from the ${placement}, type, placement, })完整示例见 docs/examples/message/placement.vue。源码中messagePlacement常量与默认值定义于 src/message.tsexport const messagePlacement [ top, top-left, top-right, bottom, bottom-left, bottom-right, ] as const export const MESSAGE_DEFAULT_PLACEMENT top在 src/method.ts 中normalizePlacement会依次执行使用全局配置 → 使用默认值top→ 校验合法性若传入非法值会输出警告并回退到top。不同 placement 的实例被存放在独立的数组中placementInstances[placement]见 src/instance.ts因此六个方向的消息互不干扰、各自独立堆叠。每个 placement 下的消息之间默认保持 16px 间距见 src/instance.ts 的getOffsetOrSpace。全局方法Element Plus 通过app.config.globalProperties注册了全局方法$message。这是由 index.ts 中的withInstallFunction(Message, $message)完成的因此在 Vue 实例内部可直接使用this.$message(...)Options API或模板中的$message(...)在script setup中通常直接导入ElMessage使用。局部引入import { ElMessage } from element-plus局部引入后请使用ElMessage(options)的方式调用并为不同类型注册了便捷方法例如ElMessage.success(options)。除返回实例外ElMessage还提供两个批量关闭能力ElMessage.closeAll() // 关闭所有实例 ElMessage.closeAll(type?) // 可选地只关闭指定类型如 ElMessage.closeAll(success) ElMessage.closeAllByPlacement(position) // 关闭指定位置placement的所有实例closeAll的实现遍历所有 placement 的实例数组为避免遍历中修改数组先做拷贝并可传入type精确过滤见 src/method.ts。App 上下文继承 ^(2.0.3)Message 构造函数接受可选的第二个参数context即 App 上下文用于将当前应用的上下文注入消息实例从而继承应用的全部属性如全局配置、插件注入等import { getCurrentInstance } from vue import { ElMessage } from element-plus // in your setup method const { appContext } getCurrentInstance()! ElMessage({}, appContext)提示如果你通过插件全局注册了 ElMessage即调用app.use(ElementPlus)或app.use(ElMessage)它会自动继承应用上下文无需手动传参。底层实现中创建 VNode 时会执行vnode.appContext context || message._context见 src/method.ts且模块末尾维护了一个message._context供全局注册时写入。全局配置Config Provider 联动Message 的默认行为可以通过 config-provider 的message配置项进行全局定制。ConfigProvider会监听其messageprop 的变化并同步写入messageConfig全局对象见 config-provider.ts。MessageConfigContext支持以下字段见 src/message.ts字段类型说明maxnumber同一时间最多显示的消息条数groupingboolean是否默认合并相同内容消息durationnumber默认展示时长毫秒offsetnumber距视口边缘的距离showCloseboolean是否显示关闭按钮plainboolean是否使用纯色样式placementstring默认位置el-config-provider :message{ max: 3, duration: 2000, placement: bottom-right, } App / /el-config-provider在 method.ts 中这些全局配置会在每次调用时被应用只有当单次调用未显式指定时全局值才会生效如duration仅在等于默认值 3000 时才会被全局值覆盖而max限制会在创建新实例前检查当前实例数量见 method.ts超出后本次调用将静默忽略。Options API 一览以下是ElMessage/$message支持的完整配置项即 src/message.ts 中messageDefaults的展开说明名称说明类型默认值message消息文本string/VNode/() VNodetype消息类型primary (2.9.11) \| success \| warning \| info \| errorinfoplain^(2.6.3)是否使用纯色样式booleanfalseicon自定义图标组件会覆盖type默认图标string/Component—dangerouslyUseHTMLString是否将message视为 HTML 字符串booleanfalsecustomClassMessage 自定义类名stringduration展示时长毫秒设为0则不自动关闭number3000showClose是否显示关闭按钮booleanfalseonClose关闭回调参数为消息实例Function—offset距视口边缘的距离top系为顶部距离bottom系为底部距离number16placement^(2.11.0)消息位置top \| top-left \| top-right \| bottom \| bottom-left \| bottom-righttopappendTo消息挂载的根元素默认document.bodyCSSSelector/HTMLElement—grouping合并相同内容的消息VNode 类型不支持booleanfalserepeatNum重复次数类似角标配合grouping使用时的初始值number1方法与返回实例Message和this.$message调用后会返回当前 Message 实例手动关闭可调用实例上的close方法方法说明类型close关闭该 Message() voidconst handler ElMessage({ message: This message will be closed manually., duration: 0, }) // 手动关闭 handler.close()关于appendTo与offset的细节appendTo支持 CSS 选择器字符串或 HTMLElement。在 method.ts 的normalizeAppendTo中字符串会先通过document.querySelector解析若解析结果不是 HTMLElement会输出ElMessage警告并回退到document.body。同方向堆叠时每条消息的实际offset会基于前一条消息底部高度动态计算getLastOffsetgetOffsetOrSpace见 src/instance.ts保证多消息之间不会重叠消息容器的zIndex由全局 z-index 管理器统一分配见 src/message.vue。底层运行机制从源码结构看Message 的完整调用链路可归纳为入口index.ts 通过withInstallFunction将Message函数注册为全局$message归一化method.ts 的normalizeOptions将字符串 / VNode / 函数参数包装为 options并合并默认值、校验appendTo与placement、应用全局配置实例管理instance.ts 按 placement 维护响应式实例数组支撑 grouping 去重、offset 堆叠与 closeAll渲染message.vue 通过createVNoderender挂载到目标容器组件内部负责过渡动画、自动关闭计时、Esc 关闭、角标与图标渲染并在销毁时执行render(null, container)避免内存泄漏见 method.ts。整个模块不依赖固定的 DOM 插槽而是命令式地动态创建与销毁这也正是它与普通声明式组件在使用体验上的本质区别调用即展示、返回即可控。Message 相关的单元测试位于tests/message.test.ts 与tests/message-manager.test.tsx覆盖了类型方法、duration、grouping、placement 与 closeAll 等核心行为是深入理解组件边界行为时值得阅读的参考。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考