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>

更详细代码可以参考 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"`;

Please feel free to use and contribute to the development.

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