消息提醒（Noticebar）

8.1 消息提醒（Noticebar）

展现需要关注的信息。

#样式

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

#标注

#应用示例

#dof-noticebar

消息通知栏，可点击，可关闭

#实例

#基础用法

<template>
  <div class="dof-demo">
    <dof-minibar
      title="Noticebar"
      background-color="#267AFF"
      text-color="#ffffff"
      :left-button="leftButton"
      @dofMinibarLeftButtonClicked="back"
    ></dof-minibar>
    <scroller class="scroller">
      <title title="dof-noticebar"></title>
      <category title="使用案例"></category>
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       notice="镁棒已使用95%，请及时更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                      @dofNoticebarCloseClicked='dofNoticebarCloseClicked'
                      notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="提示注意事项，文案自定"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar 
              center="true"
              notice="文案自定"></dof-noticebar>
      </div>
      <div class="colorPanel">
        <div class="demo">
          <dof-noticebar mode="btn"
                        btn-text="联系售后"
                        @dofNoticebarClicked="dofNoticebarClicked"
                        @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                        @dofNoticebarCloseClicked='dofNoticebarCloseClicked'
                        notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="btn"
                        btn-text="联系售后"
                        @dofNoticebarClicked="dofNoticebarClicked"
                        @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                        @dofNoticebarCloseClicked='dofNoticebarCloseClicked'
                        notice="透明背景noticebar，可用于页面有背景色的情况"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                         @dofNoticebarClicked="dofNoticebarClicked"
                        notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                         @dofNoticebarClicked="dofNoticebarClicked"
                        notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="all"
                        btn-text="联系售后"
                        @dofNoticebarClicked="dofNoticebarClicked"
                        notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="all"
                        btn-text="联系售后"
                        @dofNoticebarClicked="dofNoticebarClicked"
                        notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar notice="提示注意事项，文案自定"
                        @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                        ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                        @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                        ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar notice="文案自定"
                        center="true"
                        @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                        ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                       notice="Winter Is Coming House Stark of Winterfell, House Stark of Winterfell,Winter Is Coming House Stark of Winterfell."
          ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                      :lines="1"
                      notice="Winter Is Coming House Stark of Winterfell, House Stark of Winterfell,Winter Is Coming House Stark of Winterfell."
          ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                       :lines="3"
                       notice="Winter Is Coming House Stark of Winterfell, House Stark of Winterfell,Winter Is Coming House Stark of Winterfell."
          ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                       :lines="4"
                       notice="WinterIsComingHouseStarkofWinterfell,HouseStarkofWinterfell,WinterIsComingHouseStarkofWinterfell.WinterIsComingHouseStarkofWinterfell,HouseStarkofWinterfell,WinterIsComingHouseStarkofWinterfell."
          ></dof-noticebar>
        </div>
        <div class="demo">
          <dof-noticebar mode="closable"
                       :lines="5"
                       notice="WinterIsComingHouseStarkofWinterfell,HouseStarkofWinterfell,WinterIsComingHouseStarkofWinterfell.WinterIsComingHouseStarkofWinterfell,HouseStarkofWinterfell,WinterIsComingHouseStarkofWinterfell."
          ></dof-noticebar>
        </div>
      </div>
      
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="镁棒已使用95%，请及时更换"
                       type="warning"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                       type="warning"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                      type="warning"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                      type="warning"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                      type="warning"
                      btn-text="联系售后"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                      type="warning"
                      btn-text="联系售后"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
      </div>

      <div class="demo">
        <dof-noticebar notice="提示注意事项，文案自定"
                      type="warning"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                      type="warning"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="文案自定"
                      type="warning"
                      center="true"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="镁棒已使用95%，请及时更换"
                       type="warning-i18n"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                       type="warning-i18n"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                       type="warning-i18n"
                       notice="提示：滤芯剩余不足，请尽快更换"
                       @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                       type="warning-i18n"
                       notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                       @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                       btn-text="联系售后"
                       notice="镁棒已使用95%，请及时更换"
                       type="warning-i18n"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                       btn-text="联系售后"
                       notice="镁棒已使用95%，请及时更换，镁棒已使用95%，请及时更换"
                       type="warning-i18n"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar type="warning-i18n"
                       notice="提示注意事项，文案自定"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar type="warning-i18n"
                       notice="Winter Is Coming House Stark of Winterfell,Winter Is Coming House Stark of Winterfell."
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar type="warning-i18n"
                       center="true"
                       notice="Winter Is Coming."
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="文案自定"
                      type="warning-i18n"
                      center="true"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="镁棒已使用95%，请及时更换"
                       type="danger"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="btn"
                       btn-text="联系售后"
                       notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                       type="danger"
                       @dofNoticebarClicked="dofNoticebarClicked"
                       @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                       ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                      type="danger"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="closable"
                      type="danger"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                      type="danger"
                      btn-text="联系售后"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar mode="all"
                      type="danger"
                      btn-text="联系售后"
                      @dofNoticebarClicked="dofNoticebarClicked"
                      notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"></dof-noticebar>
      </div>

      <div class="demo">
        <dof-noticebar notice="提示注意事项，文案自定"
                      type="danger"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
                      type="danger"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="文案自定"
                      type="danger"
                      center="true"
                      @dofNoticebarBtnClicked='dofNoticebarBtnClicked'
                      ></dof-noticebar>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
  .dof-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }

  .scroller {
    flex: 1;
    padding-bottom: 200px;
  }

  .demo {
    margin-top: 40px;
  }

  .colorPanel{
    padding-bottom: 40px;
    margin-top: 40px;
    background-color: #267aff;
  }
</style>

<script>
  const modal = weex.requireModule('modal');
  import Title from 'src/_mods/title.vue'
  import Category from 'src/_mods/catalog'
  // import { setTitle } from '../_mods/set-nav';
  import { DofNoticebar,  DofMinibar } from 'dolphin-weex-ui';


  export default {
    components: { Title, Category, DofNoticebar, DofMinibar },
    data: () => ({
      leftButton: '/assets/image/header/back_white@2x.png',
      url: 'http://dolphin-weex-dev.msmartlife.cn/component/base/color.html'
    }),
    created () {
      // setTitle('Noticebar');
    },
    methods: {
      dofNoticebarCloseClicked (e) {
        console.log(e);
        modal.toast({ 'message': 'dofNoticebarCloseClicked', 'duration': 1 });
      },

      dofNoticebarClicked (e) {
        console.log('dofNoticebarClicked');
        modal.toast({ 'message': 'dofNoticebarClicked', 'duration': 1 });
      },

      dofNoticebarBtnClicked(e){
        console.log(e);
        console.log('dofNoticebarBtnClicked');
        modal.toast({ message: 'dofNoticebarBtnClicked', 'duration': 1 });
      }
    }
  };
</script>

#Attributes

Prop	Type	Required	Default	Description
type	String	N	'info'	类型：info/warning/warning-i18n/danger
notice	String	N	''	notice内容
mode	String	N	''	类型：btn/closable/all/link
btn-text	String	N	''	mode值为btn或者all时，btn按钮显示的label
center	Boolean	N	false	当提醒文本内容很少时，组件支持文本内容居中显示
lines	Number	N	2	支持提醒内容行数配置，默认为2行

#Events

事件名	说明	回调参数
dofNoticebarBtnClicked	btn按钮点击事件	e
dofNoticebarClicked	noticebar点击事件	e
dofNoticebarCloseClicked	closeIcon点击事件	e

• 注1: type属性值warning-i18n是适配国际美居中的warning，整体色呈现橙色，其余一样
• 注2: mode值为btn时，noticebar右边为按钮，为closable时为关close Icon，值为all时，btn和close同时显示