Noticebar 公告栏

效果

使用方法

<template>
  <div class="demo-list">
    <lc-title title="公告栏"></lc-title>
    <category title="默认用法"></category>
    <lc-noticebar
      color="#000"
      background="#fff"
      delay="3"
      speed="2"
      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
    ></lc-noticebar>
    <category title="禁用滚动"></category>
    <lc-noticebar
      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
      :scrollable="false"
    ></lc-noticebar>
    <category title="通告栏模式--关闭模式"></category>
    <lc-noticebar
      :closeMode="true"
      @click="hello"
    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
    </lc-noticebar>
    <category title="通告栏模式--链接模式"></category>
    <lc-noticebar
      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
    >
      <a href="https://www.jd.com">京东商城</a>
    </lc-noticebar>
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  methods: {
    hello() {
      console.log("hello world");
    }
  }
};
</script>

可配置参数

字段	说明	类型	默认值
text	提示的信息	String	空
closeMode	是否启用关闭模式	Boolean	false
leftIcon	close为没有左边icon,其他为自定义的图片链接，没有为默认图片	String	空
color	导航栏的文字颜色	String	rgba(211, 125, 066, 1)
background	导航栏的背景颜色	String	rgba(254,250,216,1)
delay	延时多少秒	String/Number	1
scrollable	是否可以滚动	Boolean	true
speed	移动375px需要用的时间	Number	6

事件回调

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