wxc-noticebar

Weex 通知栏组件

规则

• 在导航栏下方，一般用作系统提醒、活动提醒等通知
• 需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。
• 文案应该简洁明了，过长将会... , 特殊情况可以设置 lines 为2行

Demo

使用方法

<template>
  <div>
    <div>
      <wxc-noticebar
        mode="link"
        notice="测试通告,可跳转"
        type="info"
        @wxcNoticebarLinkClicked="wxcNoticebarLinkClicked"
        notice-url="//h5.m.taobao.com/trip/home/index.html">
      </wxc-noticebar>
    </div>
    <div>
      <wxc-noticebar mode="closable"
                     notice="测试通告,可跳转测试通告,可跳转测试通告,可跳转测试通告,可跳转测试通告,可跳转"
                     :lines="2"
                     type="warn"></wxc-noticebar>
      </wxc-noticebar>
    </div>
  </div>
</template>

<script>
  const modal = weex.requireModule('modal');
  import { WxcNoticebar } from 'weex-ui';
  export default {
    components: { WxcNoticebar },
    data: () => ({
      show: true
    }),
    methods: {
      wxcNoticebarCloseClicked(e){
        console.log(e);
        modal.toast({ 'message': 'wxcNoticebarCloseClicked', 'duration': 1 });
      },
      wxcNoticebarLinkClicked(e){
        console.log(e);
        modal.toast({ 'message': 'wxcNoticebarLinkClicked', 'duration': 1 });
      }
    }
  };
</script>

更详细代码可以参考 demo

可配置参数

事件回调

`@wxcNoticebarLinkClicked="wxcNoticebarLinkClicked"`
`@wxcNoticebarCloseClicked="wxcNoticebarCloseClicked"`