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="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移动375px需要用的时间Number6

Event

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

NoticeBar 公告栏 - 图1