NoticeBar 通告栏请使用手机扫码体验

基本用法

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

禁用滚动

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

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

通告栏模式—关闭模式

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

通告栏模式—链接模式

  1. html
    <nut-noticebar
  2. left-icon="//img.yzcdn.cn/vant/volume.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是否禁用Number50

Event

字段说明回调参数
click外层点击事件回调