介绍

Curtain 幕帘组件是一个居中显示的弹窗组件，基于 un-popup 实现，常用于展示全屏或大尺寸的内容，如广告、活动信息等。

基本使用

通过 show 属性控制幕帘的显示与隐藏，使用 @close 事件监听关闭操作。

<template>
	<un-curtain :show="show" @close="closeCurtain">
		<view style="border-radius: 16px;">
			<un-image src="https://aigc-miaobi-idiom-video.cdn.bcebos.com/9800a2f7551c8cf9-1762249850-watermark.png"></un-image>
		</view>
	</un-curtain>

	<view class="u-page">
		<un-button type="primary" @click="openCurtain" text="打开幕帘"></un-button>
	</view>
</template>

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

const show = ref(false)

const openCurtain = () => {
	show.value = true
}

const closeCurtain = () => {
	show.value = false
}
</script>

API

Props

参数	说明	类型	默认值
show	是否显示幕帘	boolean	true
closeable	是否显示关闭图标	boolean	true
closeIcon	关闭图标名称	string	close-circle
closeIconColor	关闭图标颜色	string	#ffffff
closeIconSize	关闭图标大小	number	24
closeIconPos	关闭图标位置	Enum	outset-bottom-center
overlay	是否显示遮罩	boolean	true
overlayStyle	自定义遮罩样式	object	{}
closeOnClickOverlay	点击遮罩是否关闭幕帘	boolean	false
zIndex	层级	string/number	10075
safeAreaInsetBottom	是否为iPhoneX留出底部安全距离	boolean	true
safeAreaInsetTop	是否留出顶部安全距离	boolean	false
bgColor	弹窗背景色	string	transparent
overlayOpacity	遮罩透明度	string/number	-
width	弹窗宽度	string/number	-
height	弹窗高度	string/number	-
customStyle	自定义样式	object	{}

Events

事件名	说明	类型
open	幕帘打开时触发	Function
close	幕帘关闭时触发	Function

slot close