BizNoticeBar 公告栏

横条公告 / 滚动通知：三种模式——static 静止、scroll 水平无缝跑马灯（scrollable="auto" 溢出才滚动，speed 速度可配）、carousel 多条上下翻动轮播；四种主题色（info / success / warning / danger）、可关闭（淡出过渡）、前后插槽、click 外抛。系统公告、停机维护通知、审批催办提醒、实时消息条（与 BizSeamlessScroll 的垂直列表滚动互补，本组件为横条形态）。

基础用法

系统将于本周六 00:00-06:00 进行升级维护，期间暂停访问，请提前保存工作内容。

静止模式 + closable 关闭（close 事件上报已读）、click 整条跳转。

<script setup lang="ts">
/** 场景：系统公告——静止模式 + 可关闭（close 事件上报已读） */
import { ElMessage } from 'element-plus'
import { BizNoticeBar } from 'vue3-ep-biz-lib'

const onClose = (): void => {
  ElMessage.info('已关闭（此处调用已读上报接口）')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizNoticeBar
      text="系统将于本周六 00:00-06:00 进行升级维护，期间暂停访问，请提前保存工作内容。"
      closable
      @close="onClose"
      @click="ElMessage.info('点击公告：跳转公告详情')"
    />
  </div>
</template>

显示代码

跑马灯滚动

速度 px/s

平台最新活动：即日起至月底，企业版套餐限时 7 折优惠，新客户可额外领取 30 天免费试用额度，详询客户成功团队或点击查看活动细则与适用范围。

短文案不会滚动（scrollable 默认 auto，溢出才滚动）

短公告：今日 18:00 例行巡检。

mode="scroll" 长文案无缝水平滚动，speed 控制速度（px/s）；scrollable 默认 auto——短文案溢出未发生时自动静止。

<script setup lang="ts">
/** 场景：跑马灯——长文案水平无缝滚动，speed 控制速度，scrollable=auto 溢出才滚 */
import { ElInputNumber } from 'element-plus'
import { ref } from 'vue'
import { BizNoticeBar } from 'vue3-ep-biz-lib'

const speed = ref(60)
</script>

<template>
  <div style="max-width: 640px">
    <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 8px">
      <span style="font-size: 13px">速度 px/s</span>
      <ElInputNumber v-model="speed" :min="10" :max="200" :step="10" size="small" />
    </div>
    <BizNoticeBar
      text="平台最新活动：即日起至月底，企业版套餐限时 7 折优惠，新客户可额外领取 30 天免费试用额度，详询客户成功团队或点击查看活动细则与适用范围。"
      mode="scroll"
      :speed="speed"
      type="success"
    />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      短文案不会滚动（scrollable 默认 auto，溢出才滚动）
    </p>
    <BizNoticeBar text="短公告：今日 18:00 例行巡检。" mode="scroll" style="margin-top: 8px" />
  </div>
</template>

显示代码

多条轮播

审批提醒：3 个采购单待您审批

当前展示：审批提醒：3 个采购单待您审批

notices 数据源 + mode="carousel" 上下翻动轮播，duration 间隔，change 联动外部状态。

<script setup lang="ts">
/** 场景：多条轮播——notices 数据源上下翻动轮播，change 联动外部状态 */
import { ref } from 'vue'
import { ElTag } from 'element-plus'
import { BizNoticeBar } from 'vue3-ep-biz-lib'
import type { BizNoticeBarItem } from 'vue3-ep-biz-lib'

const notices = ref<BizNoticeBarItem[]>([
  { id: 1, text: '审批提醒：3 个采购单待您审批', type: 'warning' },
  { id: 2, text: '库存预警：A0032 物料低于安全库存', type: 'danger' },
  { id: 3, text: '系统通知：新版报表中心已上线', type: 'info' },
])

const current = ref('')
</script>

<template>
  <div style="max-width: 640px">
    <BizNoticeBar
      :notices="notices"
      mode="carousel"
      :duration="3000"
      @change="(_i, item) => (current = item.text)"
    />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      当前展示：<ElTag size="small">{{ current || notices[0]?.text }}</ElTag>
    </p>
  </div>
</template>

显示代码

主题色

信息通知：新版操作手册已发布，可在帮助中心查阅。

成功通知：昨日数据同步任务已全部完成。

预警通知：本季度授权额度即将用尽，剩余 12%。

紧急通知：检测到异常登录行为，请立即修改密码。

info / success / warning / danger 四种语义色，前缀图标随主题。

<script setup lang="ts">
/** 场景：主题色——info / success / warning / danger 四种语义 */
import { BizNoticeBar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px; display: flex; flex-direction: column; gap: 10px">
    <BizNoticeBar type="info" text="信息通知：新版操作手册已发布，可在帮助中心查阅。" />
    <BizNoticeBar type="success" text="成功通知：昨日数据同步任务已全部完成。" />
    <BizNoticeBar type="warning" text="预警通知：本季度授权额度即将用尽，剩余 12%。" />
    <BizNoticeBar type="danger" text="紧急通知：检测到异常登录行为，请立即修改密码。" />
  </div>
</template>

显示代码

自定义插槽

客服公告：工作日 9:00-18:00 在线， 点击联系客服 ，非工作时间请提交工单。

prefix 前缀替换 + 默认插槽富文本（内嵌链接）；text 为空时纯 slot 内容也可渲染。

<script setup lang="ts">
/** 场景：自定义插槽——prefix 前缀替换 + 默认插槽富文本（链接跳转提示） */
import { ChatDotRound } from '@element-plus/icons-vue'
import { ElIcon, ElLink } from 'element-plus'
import { BizNoticeBar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px">
    <BizNoticeBar type="info" text="">
      <template #prefix>
        <ElIcon :size="15"><ChatDotRound /></ElIcon>
      </template>
      <span>
        客服公告：工作日 9:00-18:00 在线，
        <ElLink type="primary" underline="never" style="font-size: 13px; vertical-align: baseline">
          点击联系客服
        </ElLink>
        ，非工作时间请提交工单。
      </span>
    </BizNoticeBar>
  </div>
</template>

显示代码

动态推送

工单 #1024 已由客服转交二线

队列共 3 条，新消息插入队首

新消息实时插入轮播列表（模拟 WebSocket 推送），队首插入即时生效。

<script setup lang="ts">
/** 场景：动态推送——新消息实时进入轮播列表（模拟 WebSocket 推送） */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizNoticeBar } from 'vue3-ep-biz-lib'
import type { BizNoticeBarItem } from 'vue3-ep-biz-lib'

let seed = 3
const notices = ref<BizNoticeBarItem[]>([
  { id: 1, text: '工单 #1024 已由客服转交二线' },
  { id: 2, text: '客户「华辰贸易」完成年度续费' },
  { id: 3, text: '仓库 W-02 盘点任务已生成' },
])

const push = (): void => {
  seed += 1
  notices.value = [{ id: seed, text: `新消息 ${seed}：实时告警 / 订单 / 审批动态（推送时间 ${new Date().toLocaleTimeString()}）` }, ...notices.value]
  ElMessage.success('已推送 1 条新通知')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizNoticeBar :notices="notices" mode="carousel" :duration="2500" type="danger" closable />
    <ElButton size="small" style="margin-top: 10px" @click="push">模拟推送新消息</ElButton>
    <p style="margin-top: 8px; font-size: 13px; color: #909399">
      队列共 {{ notices.length }} 条，新消息插入队首
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
text	string	''	单条文案（与 notices 二选一，notices 优先）
notices	BizNoticeBarItem[]	[]	多条公告（轮播模式数据源）
type	'info' | 'success' | 'warning' | 'danger'	'warning'	主题色
mode	'static' | 'scroll' | 'carousel'	'static'	展示模式
speed	number	40	滚动速度（px/s，scroll 模式）
scrollable	boolean | 'auto'	'auto'	是否滚动：true 强制 / false 强制静止 / auto 溢出才滚动
closable	boolean	false	显示关闭按钮
duration	number	4000	轮播间隔（ms，carousel 模式）
disabled	boolean	false	禁用点击态

Events

事件名	参数	说明
close	()	点击关闭按钮（组件随即淡出）
click	(item?)	点击公告内容（轮播模式附带当前项）
change	(index, item)	轮播切换到新条目

Slots

插槽名	说明
default	公告内容（富文本 / 内嵌链接），轮播模式作用域 { item, index }
prefix	前缀图标区（默认按主题渲染图标）

Expose

名称	类型	说明
close	() => void	关闭公告栏（等同关闭按钮，不触发 close 事件）
show	() => void	重新显示
prev / next	() => void	轮播手动切换上一条 / 下一条

TIP

跑马灯为双份内容无缝循环，动画时长按内容宽度 / 速度自动计算；scrollable 强制 true 可用于短文案也要滚动的场景。