Mask layer
<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
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 |
// disappear after `@wxcOverlayBodyClicked="wxcOverlayBodyClicked"`; // disappearing `@wxcOverlayBodyClicking="wxcOverlayBodyClicking"`;