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"`;