wxc-mask

A pop-up mask

Demo

Code Example

<template>
  <div class="wrapper">
    <div class="btn" @click="openMask">
      <text class="btn-txt">Pop up a animation mask</text>
    </div>
    <div class="btn btn-margin yellow" @click="openNoAnimationMask">
      <text class="btn-txt">Pop up a no animation mask</text>
    </div>
    <wxc-mask height="800"
              width="702"
              border-radius="0"
              duration="200"
              mask-bg-color="#FFFFFF"
              :has-animation="hasAnimation"
              :has-overlay="true"
              :show-close="true"
              :show="show"
              @wxcMaskSetHidden="wxcMaskSetHidden">
      <div class="content">
        <div class="demo-title">
          <text class="title">Help you build a real Native App</text>
        </div>
        <text class="content-text">
          Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript. But underneath, the core of the application is Objective-C or Java. At the same time, Weex will provide a lot of native components or modules for developers to use.
        </text>
      </div>
    </wxc-mask>
  </div>
</template>

<script>
  import { WxcMask } from 'weex-ui';
  export default {
    components: { WxcMask },
    data: () => ({
      show: false,
      overlayCanClose: true,
      isFalse: false,
      hasAnimation: true
    }),
    methods: {
      openMask (e) {
        this.show = true;
        this.hasAnimation = true;
      },
      wxcMaskSetHidden () {
        this.show = false;
      },
      openNoAnimationMask (e) {
        this.show = true;
        this.hasAnimation = false;
      }
    }
  };
</script>

More details can be found in here

API

Event

//need set `show=false` when the mask hide
@wxcMaskSetHidden="wxcMaskSetHidden" 

@wxcMaskCloseClick="wxcMaskCloseClick"
@wxcOverlayBodyClicked="wxcOverlayBodyClicked"