遮罩层

遮罩层组件。

基础使用

通过 show 属性设置显示状态。

<template>
	<pure-overlay :show="show"></pure-overlay>
	<pure-button
		text="显示"
		@onClick="show = true"
	></pure-button>
</template>

<script setup>
	import { ref } from "vue";

	const show = ref(false);
</script>

嵌入内容

通过默认插槽嵌入内容。

提示

在内容容器上添加 @tap.stop 事件阻止点击内容关闭遮罩。

<template>
	<pure-overlay :show="show">
		<view
			class="content"
			@tap.stop
			>内容</view
		>
	</pure-overlay>
	<pure-button
		text="显示"
		@onClick="show = true"
	></pure-button>
</template>

<script setup>
	import { ref } from "vue";

	const show = ref(false);
</script>

<style lang="scss" scoped>
	.content {
		width: 100px;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #ffffff;
		border-radius: 8px;
		animation-timing-function: ease-in-out;
		animation-duration: 500ms;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
</style>

属性

名称	类型	默认值	说明
show	Boolean	false	显示状态
transparent	Boolean	false	遮罩背景透明

事件

名称	参数	说明
onClick		点击事件
onStatusChange	status	状态变化事件 enter: 正在进入; leave: 正在离开

插槽

名称	参数	说明
#default		默认，遮罩内容

样式变量

名称	说明
--pure-overlay-z-index	层级
--pure-overlay-width	宽度
--pure-overlay-height	高度
--pure-overlay-background	背景
--pure-overlay-left	位置
--pure-overlay-top	位置
--pure-overlay-direction	布局方向
--pure-overlay-align-items	子元素对其方式
--pure-overlay-justify-content	子元素对其方式
--pure-overlay-animation-timing-function	动画函数
--pure-overlay-animation-duration	动画时长
--pure-overlay-animation-delay	动画等待时长
--pure-overlay-pointer-events	响应事件方式