wxc-overlay

优质

小牛编辑

134浏览

2023-12-01

Weex 蒙层组件

规则

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

Demo

使用方法

<template>
  <div>
    <div @click="openOverlay">
      <text>点击打开蒙层</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>

更详细代码可以参考 demo

可配置参数

| Prop | Type | Required | Default | Description | |-------------|------------|--------|-----| | show | Boolean |Y| false | 是否开启 | | left | Number |N| 0 | 向左移动距离 | | top | Number |N| 0 | 向上移动距离 | | 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'] | 蒙层显示和隐藏动画函数 |

事件回调

 //消失后
 `@wxcOverlayBodyClicked="wxcOverlayBodyClicked"`;
 //点击立即
 `@wxcOverlayBodyClicking="wxcOverlayBodyClicking"`;