May 07, 2021 Vant
import Vue from 'vue';
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
<van-notice-bar text="通知内容" left-icon="volume-o" />
When there is more than one line of text, you can control whether scrolling is turned on through the scrollable parameter
<van-notice-bar :scrollable="false">
通知内容
</van-notice-bar>
When scrolling is disabled, you can set up wrapable to turn on multi-line presentations
<van-notice-bar wrapable :scrollable="false">
通知内容
</van-notice-bar>
The default mode is empty and supports both closeable and link modes
<!-- closeable 模式,在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable">
通知内容
</van-notice-bar>
<!-- link 模式,在右侧显示链接箭头 -->
<van-notice-bar mode="link">
通知内容
</van-notice-bar>
<van-notice-bar
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"
>
通知内容
</van-notice-bar>
Parameters | Description | Type | The default |
---|---|---|---|
mode |
Notification bar mode, optional value
closeable
link
|
string |
''
|
text | The content of the notification text | string |
''
|
color | The color of the text | string |
#f60
|
background | Scroll bar background | string |
#fff7cc
|
left-icon | The icon name or picture link on the left | string | - |
delay | Animation Delay Time (s) | number | string |
1
|
speed | Scroll rate (px/s) | number | string |
50
|
scrollable | Whether to scroll when the length overflows | boolean |
true
|
wrapable | Whether to turn on text line-up only takes effect when scrolling is disabled | boolean |
false
|
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when you click on the notification bar | event: Event |
close | Triggered when the notification bar is closed | event: Event |
Name | Content |
---|---|
default | The content of the notification text |
left-icon | Customize the icon on the left |
right-icon | Customize the icon on the right |