Message 消息通知

用于全局展示通知提醒信息，支持多种主题

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="visible = true">显示消息</re-button>

<!-- 事件日志 -->
  <re-message :key="current" :visible="visible" :content="currentConfig.content" :theme="currentConfig.theme" :closeBtn="currentConfig.closeBtn" :zindex="currentConfig.zindex" :offset="currentConfig.offset" @update:visible="onVisibleUpdate" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-message />。

API

Message Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示消息通知	N
content	`string`	""	消息内容	N
theme	`string`	"info"	消息主题，info/success/warning/error	N
duration	`number`	3000	显示时长，单位毫秒，0表示不自动关闭	N
offset	`Array<number>`	0, 16	相对屏幕偏移量 x, y	N
zindex	`number`	5000	元素层级	N
closeBtn	`boolean`	false	是否显示关闭按钮	N
customStyle	`string`	""	自定义样式	N

Message Events

名称	参数	描述
update:visible	value: boolean	显隐变化时触发
close	-	关闭时触发
click	-	点击时触发

Message Slots

名称	描述
-	-

MessageItem Props

名称	类型	默认值	描述	必传
content	`string`	""	消息内容	N
theme	`string`	"info"	消息主题	N

LoadingPage 加载页

全屏加载页组件，用于页面初始化或数据加载

NoticeBar 公告栏

参考 TDesign NoticeBar 示例结构，集中演示基础类型、主题状态、滚动形态与交互控制。

内容锚点

演示
代码示例
引入
API