wxc-overlay

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