遮罩 xOverlay

---

在线预览

在线模拟尺寸:

介绍

旋转制作弹层类页面。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-overlay/x-overlay.uvue

使用

<x-overlay></x-overlay>

Props 属性

名称	说明	类型	默认值
customStyle	自定义遮罩样式	string	""
customContentStyle	内容层样式	string	""
showClose	是否显示底部关闭按钮	boolean	false
overlayClick	遮罩是否允许点击被关闭	boolean	true
disabledAni	禁用弹跳动画,overlayClick设置为false时,点底部会有弹跳.	boolean	false
show	显示可v-model:show双向绑定	boolean	false
duration	动画时间	number	300
watiDuration	打开dom的延迟量，如果你打开 弹窗在ios正常。 请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致 此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。 此值仅在ios下生效。	number	120
zIndex	层级	number	1100

Events 事件

名称	参数	说明
click	-	点击遮罩事件
close	-	关闭是触发
open	-	打开时触发
beforeOpen	-	打开前执行
beforeClose	-	关闭前执行
update:show	-	等同v-model:show

Slots 插槽

名称	说明	数据
trigger	标签触发显示遮罩，免于使用变量控制	show: Boolean
default	-	-

Ref 方法

名称	参数	返回值	说明
open	-	-	打开 *
close	-	-	关闭 *

示例文件路径

/pages/fankui/overlay

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1" direction="none">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">遮罩 Overlay</x-text>
			<x-text color="#999999">
				内容以及遮罩内的对齐方式，可以直接在组件上写style来编写，自由度比较高。
				下方是遮罩配合x-animaion轻松创建一个弹层组件动画。
			</x-text>
			
		</x-sheet>
		<x-sheet>
			<x-button @click="show=true" :block="true">显示遮罩</x-button>
		</x-sheet>

		<x-overlay v-model:show="show"  customContentStyle="width:90%;"
			custom-style="display: flex;align-items: center;justify-content: center;">
			
			
			<x-sheet>
				<x-slide-verify ></x-slide-verify>
				<x-text class="py-32">我是显示的内容，点击遮罩也能关闭。</x-text>
				<x-button @click="show=false" :block="true">关闭遮罩</x-button>
			</x-sheet>
		</x-overlay>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">嵌套</x-text>
			<x-overlay customContentStyle="width:90%;"
				custom-style="display: flex;align-items: center;justify-content: center;">
				<template v-slot:trigger="{show}">
					<x-button :block="true" color="success">显示遮罩1</x-button>
				</template>

				<x-sheet>
					<x-text class="py-32">我是遮罩1的内容</x-text>
					<x-overlay :showClose="true" customContentStyle="width:90%;"
						custom-style="display: flex;align-items: center;justify-content: center;">
						<template v-slot:trigger="{show}">
							<x-button :block="true" color="success">显示遮罩2</x-button>
						</template>
						<x-sheet>
							<x-text class="py-32">我是遮罩2的内容</x-text>
						</x-sheet>
					</x-overlay>
				</x-sheet>

			</x-overlay>
		</x-sheet>


		<x-overlay :overlay-click="false" :show-close="true" customContentStyle="width:64%;"
			custom-style="display: flex;align-items: center;justify-content: center;">
			<template v-slot:trigger="{show}">
				<x-cell icon="sparkling-line" title="插槽自动触发显示遮罩" desc="让遮罩带close关闭按钮"></x-cell>
			</template>

			<x-sheet height="175">
				<x-text class="line-8">些遮罩没有配合x-animation组件来做动画内容显示。</x-text>
			</x-sheet>

		</x-overlay>

	<view style="height:500px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	const show = ref(false)
	const showSlider = ref(false)

</script>

<style lang="scss" scoped>

</style>