Vant NoticeBar 通知栏
2020-02-05 10:30 更新
引入
import Vue from 'vue';
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
代码演示
基础用法
<van-notice-bar text="通知内容" left-icon="volume-o" />
禁用滚动
文字内容多于一行时,可通过scrollable参数控制是否开启滚动
<van-notice-bar :scrollable="false">
通知内容
</van-notice-bar>
多行展示
禁用滚动时,可以设置wrapable来开启多行展示
<van-notice-bar wrapable :scrollable="false">
通知内容
</van-notice-bar>
通知栏模式
默认模式为空,支持closeable和link两种模式
<!-- 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>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 通知栏模式,可选值为 closeable link | string | '' |
text | 通知文本内容 | string | '' |
color | 文本颜色 | string | #f60 |
background | 滚动条背景 | string | #fff7cc |
left-icon | 左侧 图标名称 或图片链接 | string | - |
delay | 动画延迟时间 (s) | number | string | 1 |
speed | 滚动速率 (px/s) | number | string | 50 |
scrollable | 是否在长度溢出时滚动播放 | boolean | true |
wrapable | 是否开启文本换行,只在禁用滚动时生效 | boolean | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击通知栏时触发 | event: Event |
close | 关闭通知栏时触发 | event: Event |
Slots
名称 | 内容 |
---|---|
default | 通知文本内容 |
left-icon | 自定义左侧图标 |
right-icon | 自定义右侧图标 |
实例演示
以上内容是否对您有帮助:
更多建议: