README.md

wxc-overlay

Mask layer

Rule

• Often used in wxc-mask, wxc-dialog, wxc-popup, etc

Demo

    

Code Example

<template>
  <div class="wrapper">
    <div class="btn" @click="openOverlay">
      <text class="btn-txt">Click</text>
    </div>
    <wxc-overlay
      :show="show"
      opacity="0.6"
      @wxcOverlayBodyClicked="wxcOverlayBodyClicked"></wxc-overlay>
  </div>
</template>
<script>
  import { WxcOverlay } from 'weex-ui';
  export default {
    components: { WxcOverlay },
    data: () => ({
      show: false
    }),
    methods: {
      openOverlay () {
        this.show = true;
      },
      wxcOverlayBodyClicked () {
        this.show = false;
      }
    }
  };
</script>

More details can be found in here

API

Prop	Type	Required	Default	Description
show	Boolean	Y	false	whether to show
opacity	Number	N	0.6	opacity 0-1
left	Number	N	0	move left distance
top	Number	N	0	move top distance
has-animation	Boolean	N	true	whether to animate
can-auto-close	Boolean	N	true	whether to can auto close
duration	Number	300	N	animation duration time
timing-function	Array	N	['ease-in','ease-out']	animation timing function

Event

 // disappear after
 `@wxcOverlayBodyClicked="wxcOverlayBodyClicked"`;
 // disappearing
 `@wxcOverlayBodyClicking="wxcOverlayBodyClicking"`;