Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

import { Message } from '@szhn/dh-design-pc'

基础用法

默认情况下在顶部显示，并在 3 秒后自动消失。

<template>
  <el-button @click="show">显示消息</el-button>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'


function show() {
  Message('这是一条消息提示')
}
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。通过 type 字段指定消息类型，也可直接调用对应的快捷方法。

<template>
  <div class="demo-row">
    <el-button @click="Message.success('恭喜你，这是一条成功消息')">Success</el-button>
    <el-button @click="Message.warning('警告，这是一条警告消息')">Warning</el-button>
    <el-button @click="Message.info('这是一条消息')">Info</el-button>
    <el-button @click="Message.error('错误，请稍后再试')">Error</el-button>
    <el-button @click="Message({ message: '这是主要消息', type: 'primary' })">Primary</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

Plain 背景

设置 plain 为 true 可以得到纯色背景的消息样式。

<template>
  <div class="demo-row">
    <el-button @click="Message({ message: '纯色 Success', type: 'success', plain: true })">Success</el-button>
    <el-button @click="Message({ message: '纯色 Warning', type: 'warning', plain: true })">Warning</el-button>
    <el-button @click="Message({ message: '纯色 Info', type: 'info', plain: true })">Info</el-button>
    <el-button @click="Message({ message: '纯色 Error', type: 'error', plain: true })">Error</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

可关闭的消息提示

默认的 Message 是不可以被手动关闭的，通过 showClose 开启关闭按钮，并可通过 duration 控制展示时长，duration 为 0 时消息不会自动关闭。

<template>
  <div class="demo-row">
    <el-button @click="openClosable">可关闭消息</el-button>
    <el-button @click="openStay">不自动关闭</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'


function openClosable() {
  Message({ message: '点击右侧按钮可以关闭消息', showClose: true, duration: 5000 })
}

function openStay() {
  Message({ message: '我会一直停留，直到手动关闭', showClose: true, duration: 0 })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

使用 HTML 片段作为正文内容

将 dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。请确保内容可信，避免 XSS 攻击。

<template>
  <el-button @click="openHTML">展示富文本消息</el-button>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'


function openHTML() {
  Message({
    dangerouslyUseHTMLString: true,
    message: '<strong>这是 <i style="color: var(--el-color-primary);">HTML</i> 片段</strong>',
  })
}
</script>

分组消息合并

设置 grouping 为 true，内容相同的消息将以徽标形式合并展示。

<template>
  <div class="demo-row">
    <el-button @click="openGroup">合并消息</el-button>
    <el-button @click="openNormal">不合并</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'


function openGroup() {
  Message({ message: '相同内容会被合并', grouping: true, type: 'success' })
}

function openNormal() {
  Message({ message: '独立展示的消息', type: 'info' })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

消息位置

通过 placement 控制消息的出现位置，支持 top / bottom 等。

<template>
  <div class="demo-row">
    <el-button @click="openTop">顶部显示</el-button>
    <el-button @click="openBottom">底部显示</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Message, Button as ElButton } from '@szhn/dh-design-pc'


function openTop() {
  Message({ message: '顶部消息', placement: 'top', type: 'info' })
}

function openBottom() {
  Message({ message: '底部消息', placement: 'bottom', type: 'success' })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

全局方法

如果以插件方式全量注册，app.config.globalProperties 上会注入 $message，可在组件实例中直接调用。

按需引入

import { Message } from '@szhn/dh-design-pc'

Message({ message: '这是一条消息提示' })
Message.success({ message: '保存成功' })
Message.closeAll()

应用上下文继承 (2.0.3)

消息方法支持接收当前应用的 appContext 作为第二个参数，以继承全局配置。

import { getCurrentInstance } from 'vue'
import { Message } from '@szhn/dh-design-pc'

const { appContext } = getCurrentInstance()!
Message({}, appContext)

API

配置项（部分）

名称	说明	类型	默认值
message	消息文字	string / VNode / Function	''
type	消息类型	success / warning / info / error / primary	info
plain	是否纯色背景	boolean	false
icon	自定义图标	string / Component	—
dangerouslyUseHTMLString	是否把 message 作为 HTML 片段	boolean	false
duration	展示时长（毫秒），为 0 则不自动关闭	number	3000
showClose	是否展示关闭按钮	boolean	false
offset	距离视口的偏移量	number	16
appendTo	指定挂载根节点	string / HTMLElement	—
grouping	合并相同内容的消息	boolean	false
repeatNum	合并场景下的初始重复次数	number	1
placement	消息位置	top / bottom	top
onClose	关闭回调	Function	—

方法

名称	说明
Message.success / warning / info / error / primary	展示对应类型的消息
Message.closeAll	关闭所有消息实例
instance.close	关闭当前消息实例

更多配置参见 Element Plus Message。

Message 消息提示 ​

基础用法 ​

不同状态 ​

Plain 背景 ​

可关闭的消息提示 ​

使用 HTML 片段作为正文内容 ​

分组消息合并 ​

消息位置 ​

全局方法 ​

按需引入 ​

应用上下文继承 (2.0.3) ​

API ​

配置项（部分） ​

方法 ​