Popover 气泡框

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

支持平台

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

示例

<template>
	<t-page title="气泡框" :scrollDisabled="false" class='ff'>
		<t-card title='Popover 气泡框' class="m.30-tdr-tdb" sub-title="点击时展示关联信息"></t-card>
		<t-row class="c.f8f8f8-ff-fc">
			<view style="width: 750rpx;">
				<t-row class='fjcc'>
					<t-popover placement="bottom-start" :items="items" type='s' ref='popover'>
						<t-button type="primary">下左</t-button>
						<template v-slot:content>
							<t-col class="w.200">
								<t-cell @click="submit" class="bgn-h.80-plr.0" title-class='c.#fff' right-icon="c.#fff"
									title="插槽展示"></t-cell>
								<t-cell @click="submit" class="bgn-h.80-plr.0" title-class='c.#fff' right-icon="c.#fff"
									title="选项2"></t-cell>
								<t-cell @click="submit" class="bgn-h.80-plr.0" title-class='c.#fff' right-icon="c.#fff"
									title="选项3"></t-cell>
								<t-cell @click="submit" class="bgn-h.80-plr.0" title-class='c.#fff' right-icon="c.#fff"
									title="选项4"></t-cell>
							</t-col>
						</template>
					</t-popover>
					<t-popover placement="bottom" style="margin:0 25rpx" :items="items" type="w">
						<t-button type="primary">下中</t-button>
					</t-popover>
					<t-popover placement="bottom-end" :items="items" @select="select">
						<t-button type="primary">下右</t-button>
					</t-popover>
				</t-row>
				<t-row class='fjcb' style="padding: 50rpx;">
					<view style="display: flex;align-items: flex-start;flex: 1;">
						<t-popover placement="right-start" :items="items" type="primary">
							<t-button type="primary">右上</t-button>
						</t-popover>
						<t-popover placement="right" style="margin:25rpx 0" :items="items" type="error">
							<t-button type="primary">右中</t-button>
						</t-popover>
						<t-popover placement="right-end" :items="items" type="warning">
							<t-button type="primary">右下</t-button>
						</t-popover>
					</view>
					<view style="display: flex;align-items: flex-end;flex: 1;">
						<t-popover placement="left-start" :items="items" type="success">
							<t-button type="primary">左上</t-button>
						</t-popover>
						<t-popover placement="left" style="margin:25rpx 0" :items="items" type="primary">
							<t-button type="primary">左中</t-button>
						</t-popover>
						<t-popover placement="left-end" :items="items" type="error">
							<t-button type="primary">左下</t-button>
						</t-popover>
					</view>
				</t-row>
				<t-row class='fjcc'>
					<t-popover placement="top-start" :items="items" type="warning">
						<t-button type="primary">上左</t-button>
					</t-popover>
					<t-popover placement="top" style="margin:0 25rpx" :items="items" type="primary">
						<t-button type="primary">上中</t-button>
					</t-popover>
					<t-popover placement="top-end" :items="items" type="warning">
						<t-button type="primary">上右</t-button>
					</t-popover>
				</t-row>
			</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>

Props

名称	描述	类型	默认值
type	弹出框类型	String	''
placement	弹出框位置	String	'bottom'
items	弹出框项数据列表	UTSJSONObject[]	[]
zIndex	弹出框的层叠顺序	Number	998

Events

名称	描述	参数
select	当用户选择弹出框中的某个项时触发	item: UTSJSONObject