Vant NoticeBar 通知欄

引入

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

Vue.use(NoticeBar);

代碼演示

基礎用法

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

禁用滾動

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

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

多行展示

禁用滾動時，可以設置wrapable來開啟多行展示

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

通知欄模式

默認模式為空，支持closeable和link兩種模式

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

<!-- link 模式，在右側顯示鏈接箭頭 -->
<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