Overlay 蒙层

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

效果

使用方法

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

<style scoped>
  .button-list {
    padding-left: 24px;
  }
  .title {
    align-self: flex-start;
  }

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

</style>

<script>
  import LcTitle from '_mods/title.vue';
  import Category from '_mods/category.vue';
  export default {
    components: { LcTitle, Category },
    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) {
        this.$toast.text('click overlay!', { duration:1000 });
        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"`;