NoticeBar 通告栏

用于循环播放系统通知、警告提示或动态信息的通告栏组件，支持 5 种预设主题调色盘、文本水平无缝跑马灯滚动、可关闭模式与自定义操作区。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-notice-bar text="【通知】Muzhiyu UI 旗舰级设计系统全端版本升级已完成" />
</template>

---

2. 5 种主题变体 (5 Theme Variants)

通过 type 属性在 warning（默认警告）、primary（主要）、success（成功）、danger（危险）与 info（信息）之间切换。

<template>
  <mu-notice-bar type="warning" text="【警告】系统将在今晚 24:00 进行例行维护" />
  <mu-notice-bar type="primary" text="【通知】系统全量功能已适配暗黑模式" />
  <mu-notice-bar type="success" text="【成功】您的订单 #889211 已完成支付" />
  <mu-notice-bar type="danger" text="【危险】网络连接异常，请重试" />
  <mu-notice-bar type="info" text="【提示】点击展开查看详细信息" />
</template>

---

3. 可关闭与胶囊圆角 (Closable & Round)

设置 closable 开启右侧关闭按钮，round 开启胶囊大圆角。

<template>
  <mu-notice-bar
    type="warning"
    closable
    round
    text="点击右侧关闭按钮收起通告栏"
    @close="onClose"
  />
</template>

<script setup>
function onClose() {
  console.log('用户关闭了通告栏')
}
</script>

---

4. 自定义操作插槽 (Action Slot)

使用 #action 插槽可以在右侧自定义跳转链接或按钮：

<template>
  <mu-notice-bar type="primary" text="Muzhiyu UI 2.0 震撼发布">
    <template #action>
      <text class="btn" @click="goDetail">查看详情 ></text>
    </template>
  </mu-notice-bar>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
text	通告提示文本内容	String	-	''
type	主题颜色变体	String	warning | primary | success | danger | info	'warning'
icon	前缀图标名称 (设为 'none' 隐藏)	String	-	'' (自动匹配 type 默认图标)
iconSize	前缀图标尺寸 (rpx)	Number | String	-	16
closable	是否显示右侧关闭按钮	Boolean	true | false	false
scrollable	是否开启无缝跑马灯水平滚动	Boolean	true | false	true
round	是否开启胶囊圆角形态	Boolean	true | false	false
speed	跑马灯滚动速度 (px/s)	Number	-	50
color	自定义文本与图标颜色	String	-	''
background	自定义背景颜色	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
close	点击关闭按钮时触发	-

---

插槽说明 (Slots)

插槽名	说明
icon	前缀图标自定义插槽
action	右侧自定义操作/按钮插槽