Message 消息

唯一性消息提示组件，避免消息堆叠，提供更好的用户体验。

🎮 在线演示

想要查看消息组件的交互效果？请访问 在线演示

组件特性

🎯 唯一性

相同内容的消息不会重复显示

⚡ 智能合并

自动合并相同消息，显示次数

🎨 多种类型

支持成功、警告、错误、信息等类型

🔧 易使用

API简洁，与Element Plus保持一致

基础用法

最简单的用法，提供四种类型的消息提醒。

查看代码

<template>
  <div class="space-y-4">
    <div>
      <h3 class="mb-3">基础消息</h3>
      <div class="flex gap-3">
        <ImButton @click="showSuccess">成功消息</ImButton>
        <ImButton @click="showWarning">警告消息</ImButton>
        <ImButton @click="showError">错误消息</ImButton>
        <ImButton @click="showInfo">信息消息</ImButton>
      </div>
    </div>
    
    <div>
      <h3 class="mb-3">唯一性演示</h3>
      <div class="flex gap-3">
        <ImButton @click="showDuplicate">重复消息</ImButton>
        <ImButton @click="showCounter">计数消息</ImButton>
      </div>
      <p class="text-sm text-gray-500 mt-2">
        点击"重复消息"多次，相同内容不会重复显示；点击"计数消息"查看合并效果
      </p>
    </div>
  </div>
</template>

<script setup>
import { ImMessage } from 'imtes-ui'

const showSuccess = () => {
  ImMessage.success('操作成功！')
}

const showWarning = () => {
  ImMessage.warning('请注意！')
}

const showError = () => {
  ImMessage.error('操作失败！')
}

const showInfo = () => {
  ImMessage.info('这是一条提示信息')
}

const showDuplicate = () => {
  ImMessage.info('这是重复的消息')
}

let counter = 0
const showCounter = () => {
  counter++
  ImMessage.success(`操作成功第 ${counter} 次`)
}
</script>

可关闭的消息

可以添加关闭按钮。

查看代码

<template>
  <div class="flex gap-3">
    <ImButton @click="showClosable">可关闭消息</ImButton>
    <ImButton @click="showPersistent">持久消息</ImButton>
  </div>
</template>

<script setup>
import { ImMessage } from 'imtes-ui'

const showClosable = () => {
  ImMessage({
    message: '这是可关闭的消息',
    type: 'success',
    showClose: true
  })
}

const showPersistent = () => {
  ImMessage({
    message: '这是持久消息，不会自动消失',
    type: 'info',
    duration: 0,
    showClose: true
  })
}
</script>

自定义消息内容

可以使用 HTML 字符串作为消息内容。

查看代码

<template>
  <div class="flex gap-3">
    <ImButton @click="showHtml">HTML消息</ImButton>
    <ImButton @click="showVNode">VNode消息</ImButton>
  </div>
</template>

<script setup>
import { h } from 'vue'
import { ImMessage } from 'imtes-ui'

const showHtml = () => {
  ImMessage({
    dangerouslyUseHTMLString: true,
    message: '<strong>这是 <i>HTML</i> 消息</strong>',
    type: 'warning'
  })
}

const showVNode = () => {
  ImMessage({
    message: h('p', null, [
      h('span', null, '消息内容 '),
      h('i', { style: 'color: teal' }, 'VNode')
    ])
  })
}
</script>

全局配置

可以在应用启动时进行全局配置。

import { createApp } from 'vue'
import ImtesUI from 'imtes-ui'

const app = createApp(App)

app.use(ImtesUI, {
  message: {
    duration: 3000, // 默认显示时间
    offset: 20,     // 距离顶部偏移量
    appendTo: document.body // 添加到的父元素
  }
})

API

Message 配置

属性	说明	类型	可选值	默认值
message	消息文字	string/VNode	—	—
type	消息类型	string	success/warning/info/error	info
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	自定义类名	string	—	—
duration	显示时间，毫秒。设为 0 则不会自动关闭	number	—	3000
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	关闭时的回调函数	function	—	—
offset	Message 距离窗口顶部的偏移量	number	—	16
appendTo	设置组件的根元素	string/HTMLElement	—	document.body

Message 方法

方法名	说明	参数
Message	显示消息	(options) 或 (message, type)
Message.success	显示成功消息	(message)
Message.warning	显示警告消息	(message)
Message.info	显示信息消息	(message)
Message.error	显示错误消息	(message)
Message.closeAll	关闭所有消息	—

唯一性说明

消息组件会根据以下规则判断消息是否唯一：

1. 内容相同：消息文字完全相同的视为重复
2. 类型相同：消息类型也必须相同才视为重复
3. 自动合并：重复消息会显示次数，而不是堆叠多条
4. 智能清理：当消息关闭后，会清理对应的唯一性记录

这样可以有效避免用户快速点击时产生的消息堆叠问题。