Tui-Plus3.0.0

Appearance

Popover ( 气泡框) ​

显示弹出内容的气泡框组件，它支持配置弹出位置、弹出项数据、层叠顺序等。

支持平台 ​

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

示例代码 ​

html
<template>
	<t-page title="气泡框" :scrollDisabled="false" main-class='f p-30'>
		<t-card title='Popover 气泡框' main-class="mb-30 tdr tdb" sub-title="点击时展示关联信息"></t-card>
		<t-card title="提示" main-class="mb-30" size="l" type="e"
			sub-title="要注意层级控制，层级写在组件内部在安卓端不生效，请注意参考官方文档正确使用（https://doc.dcloud.net.cn/uni-app-x/css/z-index.html）"></t-card>
		<t-popover placement="bottom" type="p" main-class="z-1 mb-30" :animationType="1">
			<t-button type="primary">动画类型</t-button>
			<!-- <template v-slot:content>
				<t-col main-class="tdp">
					<t-cell icon="map" title="欢迎使用Tui" type="w" effect=""></t-cell>
					<t-cell icon="map" title="欢迎使用Tui" type="p" effect=""></t-cell>
					<t-cell icon="map" title="欢迎使用Tui" type="e" effect=""></t-cell>
					<t-cell icon="map" title="欢迎使用Tui" type="s" effect=""></t-cell>
				</t-col>
			</template> -->
		</t-popover>
		<t-section title="弹出方向" main-class="mb-30"></t-section>
		<t-row main-class="fv c-f8f8f8 fjcb">
			<t-view>
				<t-row main-class='fjcc mb-30 ov'>
					<t-popover placement="bottom-start" type='s' main-class="mlr-25 ov z-3" content-class="w-300"
						tips-size="10px">
						<template #button>
							<t-button type="primary">下左</t-button>
						</template>
					</t-popover>
					<t-popover placement="bottom" main-class="mlr-25 ov z-2" type="w" content-class="w-300">
						<template #button>
							<t-button type="primary">下中</t-button>
						</template>
					</t-popover>
					<t-popover placement="bottom-end" type='e' @select="select" main-class="mlr-25 ov z-1"
						content-class="w-300">
						<template #button>
							<t-button type="primary">下右</t-button>
						</template>
					</t-popover>
				</t-row>
				<t-row main-class=''>
					<t-col main-class="f fais">
						<t-popover placement="right-start" type="primary" content-class="w-300">
							<template #button>
								<t-button type="primary">右上</t-button>
							</template>
						</t-popover>
						<t-popover placement="right" style="margin:25rpx 0" type="error" content-class="w-300">
							<template #button>
								<t-button type="primary">右中</t-button>
							</template>
						</t-popover>
						<t-popover placement="right-end" type="warning" content-class="w-300">
							<template #button>
								<t-button type="primary">右下</t-button>
							</template>
						</t-popover>
					</t-col>
					<t-col main-class="f faie">
						<t-popover placement="left-start" type="success" content-class="w-300">
							<template #button>
								<t-button type="primary">左上</t-button>
							</template>
						</t-popover>
						<t-popover placement="left" style="margin:25rpx 0" type="primary" content-class="w-300">
							<template #button>
								<t-button type="primary">左中</t-button>
							</template>
						</t-popover>
						<t-popover placement="left-end" type="error" content-class="w-300">
							<template #button>
								<t-button type="primary">左下</t-button>
							</template>
						</t-popover>
					</t-col>
				</t-row>
				<t-row main-class='fjcc mt-30 ov'>
					<t-popover placement="top-start" type="warning" main-class="ov z-3" content-class="w-300">
						<template #button>
							<t-button type="primary">上左</t-button>
						</template>
					</t-popover>
					<t-popover placement="top" main-class="mlr-25 ov z-3" type="primary" content-class="w-300">
						<template #button>
							<t-button type="primary">上中</t-button>
						</template>
					</t-popover>
					<t-popover placement="top-end" type="warning" main-class="ov z-3" content-class="w-300">
						<template #button>
							<t-button type="primary">上右</t-button>
						</template>
					</t-popover>
				</t-row>
			</t-view>
		</t-row>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				items: [{
					title: '新建顾客',
					icon: 'man-add-fill'
				}, {
					title: '新建预约',
					icon: 'calendar-fill'
				}, {
					title: '新建回访',
					icon: 'phone-fill'
				}, {
					title: '扫一扫',
					icon: 'scan'
				}]
			}
		},
		methods: {
			submit() {
				(this.$refs['popover'] as ComponentPublicInstance).$callMethod('onShowPop')
			},
			select(e : UTSJSONObject) {
				console.log(e)
			}
		}
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
contentClassString``内容区样式
maskClassString``遮罩层样式
menuClassString``菜单样式
animationTypeNumber1展开时动画区别0: 不带缩放效果
1: 带缩放效果
placementStringbottom弹出框位置bottom: 显示在下方中间对齐
bottom-start: 显示在下方左边对齐
bottom-end: 显示在下方右边对齐
right: 显示在右边中间对齐
right-start: 显示在右边左边对齐
right-end: 显示在右边右边对齐
left: 显示在左边中间对齐
left-start: 显示在左边左边对齐
left-end: 显示在左边右边对齐
top: 显示在上方中间对齐
top-start: 显示在上方左边对齐
top-end: 显示在上方右边对齐
tipsSizeString18px指示三角的大小
tipsClassString``指示三角的样式

事件 ​

名称返回参数说明
change(e:boolean)展开 折叠状态变化时触发

方法 ​

名称参数返回值说明
show--展开。折叠下拉选项

插槽 ​

名称返回值说明
default-
name-