# t-popover

Popover 气泡弹出框

t-popover 组件介绍

t-popover 是气泡框组件，点击后显示弹出内容，支持配置弹出位置、动画效果等。

t-popover 平台兼容

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

t-popover 基础用法

基础用法参考 demo/popover/popover.uvue，通过插槽配置触发按钮和弹出内容。

<template>
	<t-page class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card title='Popover 气泡框'
				class="mb-15 r-10"
				sub-title="点击时展示关联信息"></t-card>
		<t-card title="提示"
				class="mb-15 r-10 p-10"
				size="l"
				type="error"
				sub-title="要注意层级控制，层级写在组件内部在安卓端不生效，请注意参考官方文档正确使用（https://doc.dcloud.net.cn/uni-app-x/css/z-index.html）"></t-card>
		<t-section title="弹出方向"
				   class="mb-15"></t-section>
		<view class='fl fjcc mb-15 ov'>
			<t-popover placement="bottom-start"
					   type='success'
					   class="ov z-3"
					   content-box-class="w-250 h-100!">
				<template #button>
					<t-button type="primary">下左</t-button>
				</template>
			</t-popover>
			<t-popover placement="bottom"
					   class="mlr-25 ov z-2"
					   type="warning"
					   content-box-class="w-250! h-150!">
				<template #button>
					<t-button type="primary">下中</t-button>
				</template>
			</t-popover>
			<t-popover placement="bottom-end"
					   type='error'
					   class="ov z-1"
					   content-box-class="w-250 h-100!">
				<template #button>
					<t-button type="primary">下右</t-button>
				</template>
			</t-popover>
		</view>
		<view class='fl fjcc mt-200 ov'>
			<t-popover placement="top-start"
					   type="warning"
					   class="ov z-3"
					   content-box-class="w-250 h-100!">
				<template #button>
					<t-button type="primary">上左</t-button>
				</template>
				<view class="p-15">
					<text class="c-#fff">插槽</text>
				</view>
			</t-popover>
			<t-popover placement="top"
					   class="mlr-25 ov z-3"
					   type="primary"
					   content-box-class="w-250 h-150!">
				<template #button>
					<t-button type="primary">上中</t-button>
				</template>
			</t-popover>
			<t-popover placement="top-end"
					   type="warning"
					   class="ov z-3"
					   content-box-class="w-250 h-100!">
				<template #button>
					<t-button type="primary">上右</t-button>
				</template>
			</t-popover>
		</view>
	</t-page>
</template>
<script setup>
	import { ref } from 'vue';
	// 响应式数据
	const items = ref([
		{ title: '新建顾客', icon: 'man-add-fill' },
		{ title: '新建预约', icon: 'calendar-fill' },
		{ title: '新建回访', icon: 'phone-fill' },
		{ title: '扫一扫', icon: 'scan' }
	]);

	// 模板引用
	const popover = ref<ComponentPublicInstance | null>(null);

	// 方法
	const submit = () => {
		popover.value?.$callMethod('onShowPop');
	};

	const select = (e : UTSJSONObject) => {
		console.log(e);
	};
</script>

t-popover Props

属性名	说明	类型	默认值
placement	弹出框位置	string	'bottom'
animationType	展开动画类型，0 不带缩放，1 带缩放	number	1
maskClass	遮罩层样式	string	-
menuClass	菜单样式	string	-
contentBoxClass	内容区样式	string	-
contentClass	内容区滚动样式	string	-
tipsClass	指示三角的样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	-

placement 可选值

值	说明
bottom	显示在下方中间对齐
bottom-start	显示在下方左边对齐
bottom-end	显示在下方右边对齐
right	显示在右边中间对齐
right-start	显示在右边上边对齐
right-end	显示在右边下边对齐
left	显示在左边中间对齐
left-start	显示在左边上边对齐
left-end	显示在左边下边对齐
top	显示在上方中间对齐
top-start	显示在上方左边对齐
top-end	显示在上方右边对齐

t-popover Events

事件名	说明	回调参数
change	展开/折叠状态变化时触发	state: boolean

t-popover Slots

插槽名	说明
button	触发按钮插槽
default	弹出内容插槽