1.0.5 • Published 1 month ago
zx-overlay 遮罩层组件
创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景。
特性
- 支持自定义透明度
- 支持自定义z-index层级
- 支持定制动画时长
- 支持添加自定义内容
- 支持控制点击行为
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| show | Boolean | false | 是否显示遮罩 |
| zIndex | String/Number | 10070 | z-index 层级 |
| duration | String/Number | 500 | 动画时长，单位毫秒 |
| opacity | String/Number | 0.5 | 不透明度值，当做rgba的第四个参数 |
| customStyle | Object | {} | 定义需要用到的外部样式 |
| closeOnClickOverlay | Boolean | true | 点击遮罩是否关闭 |
| lockScroll | Boolean | true | 是否锁定背景滚动 |
事件说明
| 事件名称 | 说明 | 回调参数 |
|---|
| click | 点击遮罩发送事件 | - |
| open | 遮罩打开动画结束时触发 | - |
| close | 遮罩关闭动画结束时触发 | - |
插槽说明
基础用法
<template>
<zx-overlay :show="show" @click="show = false"></zx-overlay>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(false);
</script>
自定义内容
<template>
<zx-overlay :show="show" @click="show = false">
<view class="content">
<text>自定义内容</text>
</view>
</zx-overlay>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(false);
</script>
<style scoped>
.content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
自定义透明度
<template>
<zx-overlay :show="show" :opacity="0.8" @click="show = false"></zx-overlay>
</template>
禁止点击遮罩关闭
<template>
<zx-overlay :show="show" :close-on-click-overlay="false" @click="clickHandler"></zx-overlay>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(false);
const clickHandler = () => {
// 自定义点击处理
console.log('遮罩被点击');
};
</script>
锁定背景滚动
<template>
<zx-overlay :show="show" :lock-scroll="true" @click="show = false"></zx-overlay>
</template>