Overlay 遮罩层

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

<zq-button type="primary" text="显示遮罩层" @click="show = true" />
<zq-overlay :show="show" @click="show = false" />

const show = ref(false)

嵌入内容

通过默认插槽在遮罩层上嵌入任意内容。

<zq-overlay :show="show" @click="show = false">
  <view class="wrapper">
    <view class="block" @click.stop />
  </view>
</zq-overlay>

自定义层级

通过 z-index 属性设置遮罩层的层级。

<zq-overlay :show="show" :z-index="2000" />

自定义背景色

通过 custom-style 属性设置自定义背景色。

<zq-overlay :show="show" custom-style="rgba(0, 0, 0, 0.7)" />

锁定滚动

默认开启 lock-scroll，遮罩层展示时会阻止页面滚动。

<zq-overlay :show="show" :lock-scroll="false" />

API

Props

参数	说明	类型	默认值
show	是否展示遮罩层	boolean	false
z-index	层级	number	1000
duration	动画时长，单位毫秒	number	300
lock-scroll	是否锁定背景滚动	boolean	true
custom-style	自定义背景色	string	''

Events

事件名	说明	回调参数
click	点击遮罩层时触发	-

Slots

名称	说明
default	嵌入在遮罩层上方的内容

注意事项

• 组件支持 v-model:show 双向绑定，点击遮罩层时会自动关闭。
• 遮罩层展示时有 0.3s 的淡入动画。