Vant3 NoticeBar 通知欄

介紹

用于循環(huán)播放展示一組消息通知。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { NoticeBar } from 'vant';

const app = createApp();
app.use(NoticeBar);

代碼演示

基礎(chǔ)用法

通過 text 屬性設(shè)置通知欄的內(nèi)容，通過 left-icon 屬性設(shè)置通知欄左側(cè)的圖標(biāo)。

<van-notice-bar
  left-icon="volume-o"
  text="在代碼閱讀過程中人們說臟話的頻率是衡量代碼質(zhì)量的唯一標(biāo)準(zhǔn)。"
/>

滾動播放

通知欄的內(nèi)容長度溢出時會自動開啟滾動播放，通過 scrollable 屬性可以控制該行為。

<!-- 文字較短時，通過設(shè)置 scrollable 屬性開啟滾動播放 -->
<van-notice-bar scrollable text="技術(shù)是開發(fā)它的人的共同靈魂。" />

<!-- 文字較長時，通過禁用 scrollable 屬性關(guān)閉滾動播放 -->
<van-notice-bar
  :scrollable="false"
  text="在代碼閱讀過程中人們說臟話的頻率是衡量代碼質(zhì)量的唯一標(biāo)準(zhǔn)。"
/>

多行展示

文字較長時，可以通過設(shè)置 wrapable 屬性來開啟多行展示。

<van-notice-bar
  wrapable
  :scrollable="false"
  text="在代碼閱讀過程中人們說臟話的頻率是衡量代碼質(zhì)量的唯一標(biāo)準(zhǔn)。"
/>

通知欄模式

通知欄支持 closeable 和 link 兩種模式。

<!-- closeable 模式，在右側(cè)顯示關(guān)閉按鈕 -->
<van-notice-bar mode="closeable">技術(shù)是開發(fā)它的人的共同靈魂。</van-notice-bar>

<!-- link 模式，在右側(cè)顯示鏈接箭頭 -->
<van-notice-bar mode="link">技術(shù)是開發(fā)它的人的共同靈魂。</van-notice-bar>

自定義樣式

通過 color 屬性設(shè)置文本顏色，通過 background 屬性設(shè)置背景色。

<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
  技術(shù)是開發(fā)它的人的共同靈魂。
</van-notice-bar>

垂直滾動

搭配 NoticeBar 和 Swipe 組件可以實現(xiàn)垂直滾動的效果。

<van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>內(nèi)容 1</van-swipe-item>
    <van-swipe-item>內(nèi)容 2</van-swipe-item>
    <van-swipe-item>內(nèi)容 3</van-swipe-item>
  </van-swipe>
</van-notice-bar>

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

API

Props

Events

方法

通過 ref 可以獲取到 NoticeBar 實例并調(diào)用實例方法，詳見組件實例方法。

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。