点我扫二维码，查看demo

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

样式

样式如下，有普通、带跳转按钮、带关闭；黄色为一般提醒样式，红色为重要提醒样式，透明白色用在页面有背景色的情况

引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { NoticeBar } from '@dolphin-iot/ui'

Vue.use(NoticeBar);

代码演示

基础用法

通过设置text属性，设置通知栏内容

<template>
    <div class="demo-list">
      <div class="panel">
        <div class="demo-panel">
          <mx-notice-bar text="提示注意事项，文案自定；" />
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        show: true
    };
  }
};
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
/deep/.mx-notice-bar {
  margin-bottom: 20px;
}
</style>

多行展示

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-notice-bar text="提示注意事项，文案自定；提示注意事项，文案自定；提示注意事项，文案自定；提示注意事项，文案自定" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        show: true
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
/deep/.mx-notice-bar {
  margin-bottom: 20px;
}
</style>

通知栏模式

可以通过type属性，修改通知栏的模式

<div class="demo-list">
  <div class="panel">
    <div class="demo-panel">
      <mx-notice-bar text="镁棒已使用95%，请及时更换" type="button" buttonText="联系售后" @button-click="buttonClick"/>
      <mx-notice-bar v-model="show" text="提示:滤芯剩余不足，请尽快更换" type="close" @close="close"/>
      <mx-notice-bar text="提示注意事项，文案自定；" type="normal" />
    </div>
  </div>
</div>
<script>
export default {
    data() {
        return {
            show: true
        };
    },
    methods: {
        buttonClick(e) {
            console.log(e)
        },
        close(boolean) {
            alert(boolean)
        }
    }
};
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
/deep/.mx-notice-bar {
  margin-bottom: 20px;
}
</style>

主题色

可以通过theme修改通知栏的主题文字内容颜色

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-notice-bar theme="red" text="镁棒已使用95%，请及时更换" type="button" buttonText="联系售后"  @button-click="buttonClick"/>
        <mx-notice-bar v-model="show" theme="red" text="提示:滤芯剩余不足，请尽快更换" type="close" @close="close"/>
        <mx-notice-bar theme="red" text="提示注意事项，文案自定" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            show: true
        };
    },
    methods: {
        buttonClick1(e) {
            console.log(e)
        },
        close1(boolean) {
            alert(boolean)
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
/deep/.mx-notice-bar {
  margin-bottom: 20px;
}
</style>

API

Prop

字段	说明	类型	默认值
text	设置通知栏的内容	string	-
type	通知栏模式,可填写值为：normal close button	string	normal
button-text	通知栏右侧按钮描述文字	string	-
theme	通知栏文字内容主题色，可选值为：yellow red white	string	yellow
show	判断是否展示通知栏	boolean	false
icon	自定义通知栏左侧图标	string	info
v-model	判断是否展示通知栏	boolean	true

Events

事件名	说明	回调函数
close	点击通知栏右侧关闭图标时触发	false
button-click	天机通知栏右侧按钮时触发	event

Slots

名称	说明
left	通知栏左侧自定义图标（内容）
middle	通知栏中间自定义内容
right	通知栏右侧自定义图标（内容）