NoticeBar 通知栏

用于循环播放展示一组消息通知。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 text 属性设置通知栏的内容。

<zq-notice-bar text="这是一条通知信息，请注意查看。" />

通知类型

支持 primary、success、warning、danger 四种类型，默认为 warning。

<zq-notice-bar type="primary" text="主要通知" />
<zq-notice-bar type="success" text="成功通知" />
<zq-notice-bar type="warning" text="警告通知" />
<zq-notice-bar type="danger" text="危险通知" />

可关闭

通过 mode="closeable" 设置为可关闭模式，右侧显示关闭按钮。

<zq-notice-bar mode="closeable" text="这是一条可关闭的通知。" @close="onClose" />

链接模式

通过 mode="link" 设置为链接模式，右侧显示箭头。

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

自定义左侧图标

通过 left-icon 属性自定义左侧图标，设置为空字符串可隐藏图标。

<zq-notice-bar left-icon="info" text="自定义图标" />
<zq-notice-bar left-icon="" text="无图标" />

滚动播放

通过 scrollable 属性开启滚动播放。

<zq-notice-bar scrollable text="这是一条很长很长的通知信息，需要滚动播放才能完整展示。" />

多行展示

通过 wrapable 属性开启多行展示。

<zq-notice-bar wrapable text="这是一条很长的通知信息，开启多行展示后会自动换行显示完整内容。" />

通过插槽自定义内容

<zq-notice-bar>
  <text>自定义内容 - </text>
  <text style="font-weight: bold;">重要通知</text>
</zq-notice-bar>

API

Props

参数	说明	类型	默认值
text	通知文本内容	string	''
type	通知类型	'primary' | 'success' | 'warning' | 'danger'	'warning'
mode	通知栏模式	'' | 'closeable' | 'link'	''
left-icon	左侧图标名称	string	'megaphone'
scrollable	是否开启滚动播放	boolean	false
wrapable	是否开启多行展示	boolean	false
speed	滚动速率（px/s）	number	60

Events

事件名	说明	回调参数
click	点击通知栏时触发	event: Event
close	关闭通知栏时触发（mode="closeable" 时有效）	-

Slots

名称	说明
default	通知文本内容，优先级高于 text 属性

注意事项

• scrollable 和 wrapable 不能同时使用，wrapable 优先级更高。
• 滚动动画时长根据文本长度自动计算。
• 关闭后通知栏会从 DOM 中移除。

主题定制

变量名	说明
--color-primary	primary 类型文字/背景色
--color-success	success 类型文字/背景色
--color-error	danger 类型文字/背景色