NoticeBar 通知栏

引入

  1. import{NoticeBar}from'vant';
  2. Vue.use(NoticeBar);

代码演示

基础用法

  1. <van-notice-bar
  2. text="通知内容"
  3. left-icon="volume-o"
  4. />

禁用滚动

文字内容多于一行时,可通过scrollable参数控制是否开启滚动

  1. <van-notice-bar :scrollable="false">
  2. 通知内容
  3. </van-notice-bar>

多行展示

禁用滚动时,可以设置wrapable来开启多行展示

  1. <van-notice-barwrapable :scrollable="false">
  2. 通知内容
  3. </van-notice-bar>

通知栏模式

默认模式为空,支持closeablelink两种模式

  1. <!-- closeable 模式,在右侧显示关闭按钮 -->
  2. <van-notice-barmode="closeable">
  3. 通知内容
  4. </van-notice-bar>
  5. <!-- link 模式,在右侧显示链接箭头 -->
  6. <van-notice-barmode="link">
  7. 通知内容
  8. </van-notice-bar>

自定义样式

  1. <van-notice-bar
  2. color="#1989fa"
  3. background="#ecf9ff"
  4. left-icon="info-o"
  5. >
  6. 通知内容
  7. </van-notice-bar>

API

Props

参数说明类型默认值版本
mode通知栏模式,可选值为 closeablelinkString''-
text通知文本内容String''-
delay动画延迟时间 (s)Number1-
speed滚动速率 (px/s)Number50-
scrollable是否在长度溢出时滚动播放Booleantrue-
wrapable是否开启文本换行,只在禁用滚动时生效Booleanfalse1.6.11
left-icon左侧图标名称或图片链接,可选值见 Icon 组件String--
color文本颜色String#f60-
background滚动条背景String#fff7cc-

Events

事件名说明回调参数
click点击通知栏时触发-
close关闭通知栏时触发-

Slots

名称内容
default通知文本内容
left-icon自定义左侧图标
right-icon自定义右侧图标

NoticeBar 通知栏 - 图1