Vant4 NoticeBar 通知欄

2023-02-16 17:56 更新

介紹

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

引入

通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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="無論我們能活多久,我們能夠享受的只有無法分割的此刻,此外別無其他。"
/>

滾動(dòng)播放

通知欄的內(nèi)容長度溢出時(shí)會(huì)自動(dòng)開啟滾動(dòng)播放,通過 ?scrollable? 屬性可以控制該行為。

<!-- 文字較短時(shí),通過設(shè)置 scrollable 屬性開啟滾動(dòng)播放 -->
<van-notice-bar scrollable text="米袋雖空——櫻花開哉!" />

<!-- 文字較長時(shí),通過禁用 scrollable 屬性關(guān)閉滾動(dòng)播放 -->
<van-notice-bar
  :scrollable="false"
  text="不會(huì)回頭的東西有四件:說出口的話、離弦的箭、逝去的生活和失去的機(jī)會(huì)。"
/>

多行展示

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

<van-notice-bar
  wrapable
  :scrollable="false"
  text="不會(huì)回頭的東西有四件:說出口的話、離弦的箭、逝去的生活和失去的機(jī)會(huì)。"
/>

通知欄模式

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

<!-- closeable 模式,在右側(cè)顯示關(guān)閉按鈕 -->
<van-notice-bar mode="closeable">米袋雖空——櫻花開哉!</van-notice-bar>

<!-- link 模式,在右側(cè)顯示鏈接箭頭 -->
<van-notice-bar mode="link">米袋雖空——櫻花開哉!</van-notice-bar>

自定義樣式

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

<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
  米袋雖空——櫻花開哉!
</van-notice-bar>

垂直滾動(dòng)

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

<van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :touchable="false"
    :show-indicators="false"
  >
    <van-swipe-item>明月直入,無心可猜。</van-swipe-item>
    <van-swipe-item>仙人撫我頂,結(jié)發(fā)受長生。</van-swipe-item>
    <van-swipe-item>今人不見古時(shí)月,今月曾經(jīng)照古人。</van-swipe-item>
  </van-swipe>
</van-notice-bar>

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

API

Props

參數(shù) 說明 類型 默認(rèn)值
mode 通知欄模式,可選值為 closeable link string ''
text 通知文本內(nèi)容 string ''
color 通知文本顏色 string #ed6a0c
background 滾動(dòng)條背景 string #fffbe8
left-icon 左側(cè)圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 string -
delay 動(dòng)畫延遲時(shí)間 (s) number | string 1
speed 滾動(dòng)速率 (px/s) number | string 60
scrollable 是否開啟滾動(dòng)播放,內(nèi)容長度溢出時(shí)默認(rèn)開啟 boolean -
wrapable 是否開啟文本換行,只在禁用滾動(dòng)時(shí)生效 boolean false

Events

事件名 說明 回調(diào)參數(shù)
click 點(diǎn)擊通知欄時(shí)觸發(fā) event: MouseEvent
close 關(guān)閉通知欄時(shí)觸發(fā) event: MouseEvent
replay 每當(dāng)滾動(dòng)欄重新開始滾動(dòng)時(shí)觸發(fā) -

方法

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

方法名 說明 參數(shù) 返回值
reset v3.1.1 重置通知欄到初始狀態(tài) - -

類型定義

組件導(dǎo)出以下類型定義:

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

?NoticeBarInstance? 是組件實(shí)例的類型,用法如下:

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

const noticeBarRef = ref<NoticeBarInstance>();

noticeBarRef.value?.reset();

Slots

名稱 內(nèi)容
default 通知文本內(nèi)容
left-icon 自定義左側(cè)圖標(biāo)
right-icon 自定義右側(cè)圖標(biāo)

主題定制

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。

名稱 默認(rèn)值 描述
--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 -


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)