遮罩

一个基础的遮罩组件，支持自定义过渡动画。

属性

名称	类型	默认值	说明
`show`	`Boolean`	`false`	显示状态
`zIndex`	`[Number, String]`	`1600`	层级
`background`	`String`	`-`	背景
`transparent`	`Boolean`	`false`	是否是透明遮罩，方便自定义弹窗时使用
`enterAnimationName`	`String`	`-`	[详情] 进入动画名称
`leaveAnimationName`	`String`	`-`	[详情] 退出动画名称
`pointerEvent`	`String`	`'-'`	响应事件的方式，对应 `css` 的 `pointer-events` 属性

自定义动画

通过 enterAnimationName 自定义显示动画。
通过 leaveAnimationName 自定义退出动画。

vuescss

vue

<template>
	<view class="page">
		<pure-overlay
			:show="show"
			@onClick="show = false"
			enter-animation-name="myCustomOverlayEnter"
			leave-animation-name="myCustomOverlayLeave"
		>
			<!-- 如果内容也需要设置动画效果，可以用插槽提供的 status 来判断当前状态，enter: 正在进入，leave: 正在退出 -->

			<template #default="{ status }">
				<view
					class="content"
					:style="`animation-name: ${ status === 'enter' ? 'myCustomContentEnter' : 'myCustomContentLeave'}`"
				>
					<text>内容
				</view>
			</template>
		</pure-overlay>

		<pure-button
			text="显示遮罩"
			theme="success"
			@onClick="show = true"
		></pure-button>
	</view>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    const show = ref(false);
</script>

<!--
 * 自定义动画不建议放到页面中，尤其是 scoped 中，可能会导致动画应用不上
 * 建议放到全局样式中，这样既可以复用，也保证动画可以生效
 -->
<style lang="scss" scoped>
.page {
    /* 页面样式 */
}
</style>

scss

// 遮罩进入动画
@keyframes myCustomOverlayEnter {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

// 遮罩离开动画
@keyframes myCustomOverlayLeave {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

// 内容动画
@keyframes myCustomContentEnter {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}

	100% {
		transform: rotate(360deg);
		opacity: 1;
	}
}

// 内容离开动画
@keyframes myCustomContentLeave {
	0% {
		transform: rotate(360deg);
		opacity: 1;
	}

	100% {
		transform: rotate(0deg);
		opacity: 0;
	}
}

事件

名称	参数	说明
`@onClick`	`-`	遮罩被点击时触发

遮罩 ​

属性 ​

自定义动画 ​

事件 ​

遮罩

属性

自定义动画

事件