lc-overlay

蒙层组件，常用于 lc-mask、lc-dialog、lc-popup 等的基础蒙层组件

效果

使用方法

<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <title title="lc-overlay" class="title"></title>
      <category title="使用案例"></category>
      <div class="button-list">
        <lc-button text="点击打开动画蒙层" class="btn-margin"
                      type="normal"
                      @LcButtonClicked="openOverlay"></lc-button>
        <lc-button text="点击打开无动画蒙层" class="btn-margin"
                      type="normal"
                      @LcButtonClicked="openNoAniOverlay"></lc-button>
      </div>
      
      <lc-overlay :show="show"
                   duration="300"
                   :hasAnimation="hasAnimation"
                   :timingFunction="timingFunction"
                   @LcOverlayBodyClicked="LcOverlayBodyClicked"
                   opacity="0.6"></lc-overlay>
    </scroller>
  </div>
</template>

<style scoped>
  .button-list {
    padding-left: 24px;
  }
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }

  .scroller {
    flex: 1;
  }

  .title {
    align-self: flex-start;
  }

  .btn-margin {
    margin-top: 40px;
  }

</style>

<script>
  import Light from 'light';
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcButton from 'lighting-ui/packages/lc-button';
  import LcOverlay from 'lighting-ui/packages/lc-overlay';

  export default {
    components: { Title, Category, LcOverlay,LcButton },
    data: () => ({
      show: false,
      hasAnimation: true,
      timingFunction: ['ease-in', 'ease-out']
    }),
    methods: {
      openOverlay () {
        this.hasAnimation = true;
        this.show = true;
      },
      openNoAniOverlay () {
        this.hasAnimation = false;
        this.show = true;
      },
      LcOverlayBodyClicked (e) {
        const modal = Light.requireModule('modal');  
        modal.toast({
          'message': 'click overlay!',
          'duration': 1
        });
        this.show = false;
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
show	Boolean	Y	false	是否开启
opacity	Number	N	0.6	蒙层opacity度数0-1
has-animation	Boolean	N	true	是否开启蒙层出现动画
duration	Number	300	N	蒙层动画时间
timing-function	Array	N	['ease-in','ease-out']	蒙层显示和隐藏动画函数

事件回调

//消失后
`@LcOverlayBodyClicked="LcOverlayBodyClicked"`;
//点击立即
`@LcOverlayBodyClicking="LcOverlayBodyClicking"`;