# t-popup

Popup 弹出层

t-popup 组件介绍

功能丰富的弹出层解决方案，支持自定义显示状态、过渡效果、持续时间、弹出方向以及灵活的样式控制。

t-popup 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-popup 基础用法

基础用法参考 demo/popup/popup.uvue，支持五种弹出方向与动画开关配置。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Popup 弹出层(停止维护请使用官方page-container)"
				sub-title="功能丰富的弹出层解决方案，支持自定义显示状态、过渡效果、持续时间、弹出方向以及灵活的样式控制"></t-card>
		<introduction title='方向'>
			<t-button class='mb-15'
					  type="primary"
					  @click="popupleftShow">左侧弹出(关闭动画效果)</t-button>
			<t-button class='mb-15'
					  type="primary"
					  @click="popuprighthow">右侧弹出</t-button>
			<t-button class='mb-15'
					  type="primary"
					  @click="popuptopShow">顶部弹出</t-button>
			<t-button class='mb-15'
					  type="primary"
					  @click="popupbottomShow">底部弹出</t-button>
			<t-button class='mb-15'
					  type="primary"
					  @click="popupcenterShow">中间弹出</t-button>
		</introduction>
		<t-popup direction="left"
				 ref='popupleft'
				 :show-footer="true"
				 :transition="false"
				 type="error"
				 size="mini">
			<view class="w-275 h-100% fc">
				<t-button type="error"
						  @click="popupleftShow">点我关闭(关闭动画)</t-button>
			</view>
		</t-popup>
		<t-popup direction="right"
				 ref='popupright'
				 :show-footer="true"
				 :mask-close="false">
			<view class="w-275 h-100% fc ">
				<t-button type="error"
						  @click="popuprighthow">点我关闭(禁用遮罩层关闭)</t-button>
			</view>
		</t-popup>
		<t-popup direction="top"
				 ref='popuptop'
				 :show-footer="true">
			<view class='h-300 fc r-0px,0px,8,8'>
				<t-button type="error"
						  @click="popuptopShow">点我关闭</t-button>
			</view>
		</t-popup>
		<t-popup direction="bottom"
				 ref='popupbottom'
				 :show-footer="true"
				 :closeable="true">
			<view class="h-400 fc">
				<t-button type="error"
						  @click="popupbottomShow">点我关闭</t-button>
			</view>
		</t-popup>
		<t-popup direction="center"
				 ref='popupcenter'
				 :show-footer="true"
				 :closeable="true">
			<view class="h-200 fc w-250">
			</view>
		</t-popup>
		<view class="h-2500"></view>
	</view>
</template>

<script setup>
	const popupleft = ref<ComponentPublicInstance | null>(null)
	const popupright = ref<ComponentPublicInstance | null>(null)
	const popuptop = ref<ComponentPublicInstance | null>(null)
	const popupbottom = ref<ComponentPublicInstance | null>(null)
	const popupcenter = ref<ComponentPublicInstance | null>(null)
	function popupleftShow() {
		popupleft.value?.$callMethod('show')
	}
	function popuprighthow() {
		popupright.value?.$callMethod('show')
	}
	function popuptopShow() {
		popuptop.value?.$callMethod('show')
	}
	function popupbottomShow() {
		popupbottom.value?.$callMethod('show')
	}
	function popupcenterShow() {
		popupcenter.value?.$callMethod('show')
	}
</script>

t-popup Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
stop	Boolean	false	是否阻止事件冒泡	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
cancelText	String	"取消"	取消按钮的文本	-
confirmText	String	"确认"	确认按钮的文本	-
transition	Boolean	true	是否开启过渡动画效果	true, false
maskClose	Boolean	true	点击遮罩层是否关闭窗口	true, false
duration	Number	200	过渡动画的时间	-
direction	String	"left"	弹出层的进入页面的方向	left, right, top, bottom, center
contentClass	String	""	内容区容器样式	-
closeable	Boolean	false	是否显示关闭按钮	true, false
closeableClass	String	""	关闭按钮样式	-
showFooter	Boolean	true	是否显示底部按钮	true, false
footerClass	String	""	底部按钮样式	-
headerClass	String	""	标题栏容器样式	-
titleClass	String	""	标题样式	-
title	String	""	标题	-

t-popup Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-
close	点击关闭按钮时触发	-
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-popup Slots

插槽名	说明
default	内容插槽，用于放置弹窗的主体内容
header	标题栏插槽，用于自定义标题栏内容
footer	底部按钮插槽，用于自定义底部按钮

Direction 说明

方向值	说明	动画效果
left	从左侧弹出	从左侧滑入
right	从右侧弹出	从右侧滑入
top	从顶部弹出	从顶部滑入
bottom	从底部弹出	从底部滑入
center	从中心弹出	从中心缩放