NoticeBar 通告栏

基本用法

  1. <nut-noticebar
  2. text="华为畅享9新品即将上市,活动期间0元预约可参与抽奖,赢HUAWEI WATCH等好礼,更多产品信息请持续关注!"
  3. ></nut-noticebar>

禁用滚动

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

  1. <nut-noticebar
  2. text="华为畅享9新品即将上市,活动期间0元预约可参与抽奖,赢HUAWEI WATCH等好礼,更多产品信息请持续关注!"
  3. :scrollable="false"
  4. ></nut-noticebar>

通告栏模式—关闭模式

  1. <nut-noticebar
  2. :closeMode="true"
  3. @click="hello"
  4. >华为畅享9新品即将上市,活动期间0元预约可参与抽奖,赢HUAWEI WATCH等好礼,更多产品信息请持续关注!
  5. </nut-noticebar>

通告栏模式—链接模式

  1. <nut-noticebar
  2. left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
  3. >
  4. <a href="https://www.jd.com">京东商城</a>
  5. </nut-noticebar>

Prop

字段说明类型默认值
text提示的信息String
closeMode是否启用关闭模式Booleanfalse
leftIconclose为没有左边icon,其他为自定义的图片链接,没有为默认图片String
color导航栏的文字颜色String
background导航栏的背景颜色String
delay延时多少秒String/Number1
scrollable是否可以滚动Booleantrue
speed滚动速率 (px/s)Number50

Event

字段说明回调参数
click外层点击事件回调event: Event
close关闭通知栏时触发event: Event

NoticeBar 公告栏 - 图1