遮罩层 Overlay

遮罩层组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 show 属性设置显示状态。
• 通过 @close 事件监听关闭事件,需手动更新显示状态,组件不自动处理。

<template>
    <pure-overlay :show="show" @close="show = false"></pure-overlay>
</template>

嵌入内容

• 通过默认 slot 嵌入遮罩内容。
• 如果不想嵌入的内容触发 @close 事件,可以给嵌入内容上添加 @tap.stop 事件。

<template>
    <pure-overlay :show="show" @close="show = false">
        <!-- @tap.stop: 阻止嵌入内容触发关闭事件 -->
        <view class="block" @tap.stop>嵌入的内容</view>
    </pure-overlay>
</template>

锁定背景滚动

• 直接给组件添加 @touchmove.stop.prevent="" 和 @wheel.stop.prevent="" 事件，即可锁定背景滚动。
• 注意:在某些小程序端,添加对应事件后可能会导致内容也无法滚动。

<template>
    <pure-overlay :show="show" @close="show = false" @touchmove.stop.prevent="" @wheel.stop.prevent=""></pure-overlay>
</template>

内容位置

• 通过添加对应辅助类实现:
  • pure-overlay-left-top: 左上;
  • pure-overlay-left-center: 左中;
  • pure-overlay-left-bottom: 左下;
  • pure-overlay-center-top: 中上;
  • pure-overlay-center-center: 正中;
  • pure-overlay-center-bottom: 中下;
  • pure-overlay-right-top: 右上;
  • pure-overlay-right-center: 右中;
  • pure-overlay-right-bottom: 右下;

<template>
    <pure-overlay :show="show" @close="show = false" class="pure-overlay-left-top">
        <view class="block" @tap.stop>左上</view>
    </pure-overlay>
</template>

自定义过渡动画

• 通过以下类名实现自定义过渡动画:
  • pure-overlay-before-show: 显示前的初始状态;
  • pure-overlay-to-show: 显示中的过渡状态;
  • pure-overlay-show: 显示后的最终状态;
  • pure-overlay-before-hide: 隐藏前的初始状态;
  • pure-overlay-to-hide: 隐藏中的过渡状态;
  • pure-overlay-hide: 隐藏后的最终状态;

<template>
    <view class="custom-animation">
        <pure-overlay :show="show" @close="show = false">
            <view class="block" @tap.stop>自定义过渡动画</view>
        </pure-overlay>
    </view>
</template>

<style lang="scss" scoped>
// 由于组件 scoped 问题,需使用 :deep(...)
:deep(.custom-animation) {
    // 过渡动画函数
    --pure-overlay-transition-timing-function: ease-in-out;

    // 显示前的初始状态
    .pure-overlay-before-show {
        transform: scale(0);
    }

    // 显示中的过渡状态
    .pure-overlay-to-show {
        transform: scale(1.5);
    }

    // 最终显示状态
    .pure-overlay-show {
        transform: scale(1);
    }

    // 隐藏前的初始状态
    .pure-overlay-before-hide {
        transform: scale(1);
    }

    // 隐藏中的过渡状态
    .pure-overlay-to-hide {
        transform: scale(1.5);
    }

    // 最终隐藏状态
    .pure-overlay-hide {
        transform: scale(0);
    }
}
</style>

Props

属性名	说明	类型	默认值	可选值	版本
show	显示状态	Boolean	true	false	+1.0.0

Event

事件名	说明	回调参数	版本
close	关闭事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认，嵌入内容	-	+1.0.0