Vant NoticeBar 通知欄

引入

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

Vue.use(NoticeBar);

代碼演示

基礎(chǔ)用法

<van-notice-bar text="通知內(nèi)容" left-icon="volume-o" />

禁用滾動(dòng)

文字內(nèi)容多于一行時(shí)，可通過(guò)scrollable參數(shù)控制是否開(kāi)啟滾動(dòng)

<van-notice-bar :scrollable="false">
  通知內(nèi)容
</van-notice-bar>

多行展示

禁用滾動(dòng)時(shí)，可以設(shè)置wrapable來(lái)開(kāi)啟多行展示

<van-notice-bar wrapable :scrollable="false">
  通知內(nèi)容
</van-notice-bar>

通知欄模式

默認(rèn)模式為空，支持closeable和link兩種模式

<!-- closeable 模式，在右側(cè)顯示關(guān)閉按鈕 -->
<van-notice-bar mode="closeable">
  通知內(nèi)容
</van-notice-bar>

<!-- link 模式，在右側(cè)顯示鏈接箭頭 -->
<van-notice-bar mode="link">
  通知內(nèi)容
</van-notice-bar>

自定義樣式

<van-notice-bar
  color="#1989fa"
  background="#ecf9ff"
  left-icon="info-o"
>
  通知內(nèi)容
</van-notice-bar>

API

Props

Events

Slots