Popup (弹出层)

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

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

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

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

			};
		},
		onLoad() {

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

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
cancelText	String	取消	取消按钮的文本
duration	Number	200	过渡动画的时间
confirmText	String	确认	确认按钮的文本
maskClose	Boolean	true	点击遮罩层是否关闭窗口
contentClass	String	``	内容区容器样式
closeable	Boolean	false	是否显示关闭按钮
closeableClass	String	``	关闭按钮样式
showFooter	Boolean	false	是否显示底部按钮
footerClass	String	``	底部按钮样式
type	String	p	主题类型
direction	String	left	弹出层的进入页面的方向	left: 从左侧弹出 right: 从右侧弹出 top: 从顶部弹出 bottom: 从底部弹出 center: 从中心弹出
maskOpacity	Number	1	遮罩层透明度
transition	Boolean	true	是否关闭过渡动画效果

事件

名称	返回参数	说明
cancel	-	点取消按钮时触发
open	-	打开时触发
confirm	-	点确认按钮时触发
close	-	关闭时触发
transitionend	-	动画结束时触发

方法

名称	参数	返回值	说明
show	-	-	打开关闭弹出层

插槽

名称	返回值	说明
name	-
default	-