wxc-overlay

Weex 蒙层组件

规则

  • 常用于 wxc-mask、wxc-dialog、wxc-popup 等的基础蒙层组件

Demo

wxc-overlay 蒙层 - 图1 wxc-overlay 蒙层 - 图2

使用方法

  1. <template>
    2.   <div class="wrapper">
    3.     <div class="btn" @click="openOverlay">
    4.       <text class="btn-txt">点击打开蒙层</text>
    5.     </div>
    6.     <wxc-overlay
    7.       :show="show"
    8.       opacity="0.6"
    9.       @wxcOverlayBodyClicked="wxcOverlayBodyClicked"></wxc-overlay>
    10.   </div>
    11. </template>
    12. <script>
    13.   import { WxcOverlay } from 'weex-ui';
    14.   export default {
    15.     components: { WxcOverlay },
    16.     data: () => ({
    17.       show: false
    18.     }),
    19.     methods: {
    20.       openOverlay () {
    21.         this.show = true;
    22.       },
    23.       wxcOverlayBodyClicked () {
    24.         this.show = false;
    25.       }
    26.     }
    27.   };
    28. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
show Boolean Y false 是否开启
opacity Number N 0.6 蒙层opacity度数0-1
has-animation Boolean N true 是否开启蒙层出现动画
can-auto-close Boolean N true 是否可以点击自动关闭
duration Number 300 N 蒙层动画时间
timing-function Array N ['ease-in','ease-out'] 蒙层显示和隐藏动画函数
### 事件回调
1. //消失后
2. @wxcOverlayBodyClicked="wxcOverlayBodyClicked";
3. //点击立即
4. @wxcOverlayBodyClicking="wxcOverlayBodyClicking";Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-overlay/