Popup 弹出层组件

TPopup 组件提供了一个灵活的弹出层界面，可以根据需要配置其显示状态、过渡效果、持续时间、弹出方向以及内容区域的类名。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='抽屉-弹出层'>
		<t-card class="mlrt.30" title="Popup 弹出层" sub-title="功能丰富的弹出层解决方案，支持自定义显示状态、过渡效果、持续时间、弹出方向以及灵活的样式控制"></t-card>
		<introduction title='方向'>
			<t-button class='mb.30' @click="popupShow('popupleft')">左侧弹出(关闭动画效果)</t-button>
			<t-button class='mb.30' @click="popupShow('popupright')">右侧弹出</t-button>
			<t-button class='mb.30' @click="popupShow('popuptop')">顶部弹出</t-button>
			<t-button class='mb.30' @click="popupShow('popupbottom')">底部弹出</t-button>
			<t-button class='mb.30' @click="popupShow('popupcenter')">中间弹出</t-button>
		</introduction>
		<t-popup direction="left" ref='popupleft' :transition="false" :show-footer="true">
			<t-col class="w.550-h.100%-fc-tdb">
				<t-button type="error" @click="popupShow('popupleft')">点我关闭(关闭动画)</t-button>
			</t-col>
		</t-popup>
		<t-popup direction="right" ref='popupright' :show-footer="true">
			<t-col class="w.550-h.100%-fc-tdb">
				<t-button type="error" @click="popupShow('popupright')">点我关闭</t-button>
			</t-col>
		</t-popup>
		<t-popup direction="top" ref='popuptop' :show-footer="true">
			<t-col class='h.600-fc-w.750-r.0px,0px,30rpx,30rpx-tdb'>
				<t-button type="error" @click="popupShow('popuptop')">点我关闭</t-button>
			</t-col>
		</t-popup>
		<t-popup direction="bottom" ref='popupbottom' :show-footer="true" :closeable="true">
			<t-col class="h.800-fc-w.750-r.30rpx,30rpx,0rpx,0rpx-tdb">
				<t-button type="error" @click="popupShow('popupbottom')">点我关闭</t-button>
			</t-col>
		</t-popup>
		<t-popup direction="center" ref='popupcenter' :show-footer="true" :closeable="true">
			<t-col class="h.400-fc-w.500-tdr-tdb">
				<t-button type="error" @click="popupShow('popupcenter')">点我关闭</t-button>
			</t-col>
		</t-popup>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad() {

		},
		methods: {
			popupShow(ref : string) {
				(this.$refs[ref] as ComponentPublicInstance).$callMethod('show')
			}
		}
	}
</script>

Props

名称	描述	类型	默认值
modelValue	是否显示弹出层	Boolean	false
transition	是否使用过渡效果	Boolean	true
duration	过渡效果的持续时间（毫秒）	Number	200
direction	弹出层的方向	String	'left'
contentClass	弹出层内容的自定义类名	String	''
closeable	是否显示关闭按钮	Boolean	false
showFooter	是否显示底部按钮	Boolean	false

Events

名称	描述	参数
change	当弹出层的显示状态改变时触发	isShow: Boolean
close	当弹出层关闭时触发	-
cancel	当点击底部取消按钮时触发	-
confirm	当点击底部确认按钮时触发	-

Methods

名称	描述	参数
show	切换弹出层的显示状态	-
transitionend	过渡效果结束时的处理函数	-
maskClick	点击遮罩层时的处理函数	-
updateDom	更新弹出层DOM的函数	-