NoticeBar 通告栏

介绍

用于循环展示通知、公告等重要信息，支持滚动、关闭与链接样式。

基础用法

通过 text 设置通告内容，默认 warning 类型；默认 mode="auto"，文本溢出时自动滚动。

<vd-notice-bar text="这是一条通告信息，用于展示重要通知。" />

通告类型

通过 type 设置类型，可选值为 default primary success warning danger。

<vd-notice-bar type="primary" text="主要类型通告" />
<vd-notice-bar type="success" text="成功类型通告" />

展示模式

通过 mode 设置文本展示方式：

值	说明
auto	溢出时自动滚动（默认）
scroll	强制滚动
ellipsis	单行省略
wrap	多行换行

<vd-notice-bar mode="scroll" text="技术是开发它的人的共同灵魂。" />
<vd-notice-bar mode="ellipsis" text="技术是开发它的人的共同灵魂。" />
<vd-notice-bar mode="wrap" text="技术是开发它的人的共同灵魂。" />

可关闭

通过 closeable 显示关闭按钮，配合 show 与 click-close 控制显隐。

<vd-notice-bar
  :show="show"
  closeable
  text="这条通告可以关闭"
  @click-close="show = false"
/>

链接样式

通过 is-link 显示右侧箭头并开启点击反馈，监听 click 处理跳转。也可单独使用 clickable 仅开启点击反馈。

<vd-notice-bar is-link text="点击查看详情" @click="onClick" />

自定义图标

通过 left-icon、right-icon 自定义左右图标，与 Cell 用法一致。

<vd-notice-bar
  left-icon="tip-fill"
  right-icon="arrow-right"
  clickable
  text="自定义左右图标"
/>

自定义颜色

通过 color、background 自定义外观；left-icon 传空字符串可隐藏左侧图标。

<vd-notice-bar
  color="#1989fa"
  background="#ecf9ff"
  left-icon="tip-fill"
  text="自定义文字颜色与背景色"
/>

<vd-notice-bar left-icon="" text="不展示左侧图标的通告栏" />

API

Props

参数	说明	类型	默认值
show	是否展示	boolean	true
text	通告文本，可被默认插槽覆盖	string	-
type	类型，可选值为 default primary success warning danger	NoticeBarType	'warning'
color	文本颜色，优先级高于 type	string	-
background	背景色，优先级高于 type	string	-
left-icon	左侧图标，传空字符串隐藏	IconName	'notify'
right-icon	右侧图标	IconName	-
is-link	是否展示右侧箭头并开启点击反馈	boolean	false
clickable	是否开启点击反馈	boolean	false
mode	展示模式，可选值为 auto scroll ellipsis wrap	NoticeBarMode	'auto'
speed	滚动速率，单位 px/s；仅 auto / scroll 时生效	string | number	60
delay	动画延迟，单位 ms；仅 auto / scroll 时生效	string | number	1000
closeable	是否显示关闭按钮	boolean	false
transition	关闭动画名称	TransitionName	'collapse-fade'
transition-duration	关闭动画时长	number | object	300
transition-immediate	初始化展示时是否触发动画	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点 id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击通告栏时触发	MouseEvent
click-close	点击关闭按钮时触发	MouseEvent
open	打开时触发	-
opened	打开完成时触发	-
close	关闭时触发	-
closed	关闭完成时触发	-
replay	滚动动画完成一轮时触发	-

Slots

名称	说明
default	自定义通告内容
left	自定义左侧内容
right	自定义右侧内容
close	自定义关闭按钮

类型定义

组件导出以下类型定义：

import type { NoticeBarType, NoticeBarMode, NoticeBarThemeVars } from 'vital-design';