Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: ea4147e562
Branches Tags
nutui
/
src
/
packages
/
noticebar
/
doc.md

doc.md 3.0 KB
History Raw

NoticeBar 通告栏

基本用法

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

可关闭信息

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

带 icon 的消息

    <nut-noticebar
      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
    </nut-noticebar>

禁用滚动

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

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

自定义颜色

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

链接模式

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

Prop

字段 说明 类型 默认值
text 提示的信息 String 空
close-mode 是否启用关闭模式 Boolean false
left-icon close为没有左边icon,其他为自定义的图片链接，没有为默认图片 String 空
color 导航栏的文字颜色 String 空
background 导航栏的背景颜色 String 空
delay 延时多少秒 String/Number 1
scrollable 是否可以滚动 Boolean true
speed 滚动速率 (px/s) Number 50
wrapable 是否开启文本换行，只在禁用滚动时生效 Boolean false

Event

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