创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景

基本使用

• 通过show参数配置是否显示遮罩
• 遮罩被点击时，会发送一个click事件

<template>
	<un-overlay :show="show" @click="show = false"></un-overlay>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	const show = ref(true)
</script>

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容
注意：如果不想让slot插槽内容的点击事件冒泡到遮罩，请给指定元素添加上@tap.stop

<template>
	<un-overlay :show="show" @click="show = false">
		<view class="warp">
			<view class="rect" @tap.stop></view>
		</view>
	</un-overlay>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	const show = ref(true)
</script>

<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>

遮罩样式

• 通过duration设置遮罩淡入淡出的时长，单位ms

<un-overlay :show="show" :duration="400" :zIndex="999" :opacity="0.3"></un-overlay>

<script setup lang="ts">
	import { ref } from 'vue'

	const show = ref(true)
</script>

Props

参数	说明	类型	默认值
show	是否显示遮罩	Boolean	false
zIndex	z-index 层级	string | number	10070
duration	动画时长，单位毫秒	string | number	300
opacity	不透明度值，当做rgba的第四个参数	string | number	0.5
customStyle	自定义样式	object	{}

Events

事件名	说明	回调参数
click	点击遮罩发送此事件	-

Slot

名称	说明
default	默认插槽，用于在遮罩层上方嵌入内容

数据类型

OverlayProps

字段名	类型	说明
show	boolean	是否显示遮罩
zIndex	string | number	z-index 层级
duration	string | number	动画时长，单位毫秒
opacity	string | number	不透明度值，当做rgba的第四个参数
customStyle	object	自定义样式

Scss 变量

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档