NoticeBar 通知栏 - Vant 4

📢 NoticeBar 通知栏

🎯 介绍

NoticeBar 组件用于循环播放展示一组消息通知，让重要信息更加醒目！支持滚动播放、多行展示等功能。

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { NoticeBar } from'vant'; const app = createApp(); app.use(NoticeBar);

🎯 代码演示

🔧 基础用法

通过 text 属性设置通知栏的内容，通过 left-icon 属性设置通知栏左侧的图标，就像给消息穿上醒目的外衣！👕

<van-notice-bar
  left-icon="volume-o"
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>

📜 滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，就像跑马灯一样优雅地展示长文本！🎠 通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，禁用滚动播放 -->
<van-notice-bar :scrollable="false" text="通知内容" />

<!-- 文字较长时，开启滚动播放 -->
<van-notice-bar
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>

📝 多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示，让长文本像诗歌一样分行展示！📖

<van-notice-bar
  wrapable
  :scrollable="false"
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>

🎭 通知栏模式

通知栏支持 closeable 和 link 两种模式，让用户可以关闭或跳转！

<!-- 可关闭模式 -->
<van-notice-bar mode="closeable">
  通知内容
</van-notice-bar>

<!-- 链接模式 -->
<van-notice-bar mode="link">
  通知内容
</van-notice-bar>

🎨 自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色，让通知栏拥有独特的"颜值"！✨

<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
  通知内容
</van-notice-bar>

🎢 垂直滚动

搭配 NoticeBar 和 Swipe 组件，可以实现垂直滚动的效果，就像电梯一样上下切换消息！🏢

<van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>明月直看山头树</van-swipe-item>
    <van-swipe-item>无限青山烟雾中</van-swipe-item>
    <van-swipe-item>千里江山寒色远</van-swipe-item>
  </van-swipe>
</van-notice-bar>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>

📋 API

🎛️ Props

参数	说明	类型	默认值
mode	通知栏模式，可选值为 closeable link，决定交互方式 🎭	string	''
text	通知文本内容，消息的核心内容 📝	string	''
color	通知文本颜色，让文字更醒目 🎨	string	#ed6a0c
background	通知栏背景色，营造视觉氛围 🌈	string	#fffbe8
left-icon	左侧图标名称或图片链接，等同于 Icon 组件的 name 属性 🎯	string	-
delay	动画延迟时间 (s)，控制滚动开始的时机 ⏰	number | string	1
speed	滚动速率 (px/s)，控制文字滚动的快慢 🏃	number | string	60
scrollable	是否开启滚动播放，内容长度溢出时默认开启 🎠	boolean	-
wrapable	是否开启文本换行，只在禁用滚动时生效 📖	boolean	false

🎪 Events

事件名	说明	回调参数
click	点击通知栏时触发，可以执行跳转等操作 👆	event: MouseEvent
close	关闭通知栏时触发，用户主动关闭消息 ❌	event: MouseEvent
replay	每当滚动栏重新开始滚动时触发，循环播放的节拍 🔄	-

🔧 方法

通过 ref 可以获取到 NoticeBar 实例并调用实例方法，详见组件实例方法。

方法名	说明	参数	返回值
reset	重置通知栏到初始状态，重新开始滚动 🔄	-	-

📝 类型定义

组件导出以下类型定义：

import type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';

NoticeBarInstance 是组件实例的类型，用法如下：

import { ref } from 'vue';
import type { NoticeBarInstance } from 'vant';

const noticeBarRef = ref<NoticeBarInstance>();
noticeBarRef.value?.reset();

🎰 Slots

名称	内容
default	通知文本内容，可以自定义消息展示 📝
left-icon	自定义左侧图标，个性化图标展示 ⬅️
right-icon	自定义右侧图标，添加操作按钮 ➡️

🎨 主题定制

🎛️ 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-notice-bar-height	40px	通知栏高度 📏
--van-notice-bar-padding	0 var(--van-padding-md)	通知栏内边距 📦
--van-notice-bar-wrapable-padding	var(--van-padding-xs) var(--van-padding-md)	多行模式内边距 📖
--van-notice-bar-text-color	var(--van-orange-dark)	文字颜色 ✏️
--van-notice-bar-font-size	var(--van-font-size-md)	字体大小 📝
--van-notice-bar-line-height	24px	行高 📐
--van-notice-bar-background	var(--van-orange-light)	背景颜色 🎨
--van-notice-bar-icon-size	16px	图标大小 🎯
--van-notice-bar-icon-min-width	24px	图标最小宽度 📏

📚 相关文档

• Icon 图标 - 图标组件
• Swipe 轮播 - 轮播组件
• Toast 轻提示 - 轻提示组件
• Dialog 弹出框 - 弹出框组件