Popover 弹出框

基础用法

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

hover 激活 click 激活 focus 激活 手动激活

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

<template>
	<div class="popover-block">
		<tu-popover
			placement="top-start"
			title="标题"
			width="200"
			trigger="hover"
			content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
		>
			<tu-button slot="reference">hover 激活</tu-button>
		</tu-popover>

		<tu-popover
			placement="bottom"
			title="标题"
			width="200"
			trigger="click"
			content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
		>
			<tu-button slot="reference">click 激活</tu-button>
		</tu-popover>

		<tu-popover
			ref="popover"
			placement="right"
			title="标题"
			width="200"
			trigger="focus"
			content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
		>
		</tu-popover>
		<tu-button v-popover:popover>focus 激活</tu-button>

		<tu-popover
			placement="bottom"
			title="标题"
			width="200"
			trigger="manual"
			content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
			v-model="visible"
		>
			<tu-button
				slot="reference"
				@click="visible = !visible"
				>手动激活</tu-button
			>
		</tu-popover>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
			};
		},
	};
</script>

<style>
	.popover-block .tu-button {
		margin-right: 10px;
	}
</style>

Expand Copy Copy

嵌套信息

可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。

click 激活

利用分发取代content属性

<template>
	<tu-popover
		placement="right"
		width="400"
		trigger="click"
	>
		<tu-table :data="gridData">
			<tu-table-column
				width="150"
				property="date"
				label="日期"
			></tu-table-column>
			<tu-table-column
				width="100"
				property="name"
				label="姓名"
			></tu-table-column>
			<tu-table-column
				width="300"
				property="address"
				label="地址"
			></tu-table-column>
		</tu-table>
		<tu-button slot="reference">click 激活</tu-button>
	</tu-popover>
</template>

<script>
	export default {
		data() {
			return {
				gridData: [
					{
						date: "2022-05-02",
						name: "唐小虎",
						address: "合肥市高新区创新大道 121 号",
					},
					{
						date: "2022-05-04",
						name: "唐小虎",
						address: "合肥市高新区创新大道 121 号",
					},
					{
						date: "2022-05-01",
						name: "唐小虎",
						address: "合肥市高新区创新大道 121 号",
					},
					{
						date: "2022-05-03",
						name: "唐小虎",
						address: "合肥市高新区创新大道 121 号",
					},
				],
			};
		},
	};
</script>

Expand Copy Copy

嵌套操作

当然，你还可以嵌套操作，这相比 Modal 更为轻量：

这是一段内容这是一段内容确定删除吗？

取消 确定

删除

<template>
	<tu-popover
		placement="top"
		width="160"
		v-model="visible"
	>
		<p>这是一段内容这是一段内容确定删除吗？</p>
		<div style="text-align: right; margin: 0">
			<tu-button
				size="mini"
				@click="visible = false"
				>取消</tu-button
			>
			<tu-button
				style="margin-left: 4px"
				type="danger"
				size="mini"
				@click="visible = false"
				>确定</tu-button
			>
		</div>
		<tu-button slot="reference">删除</tu-button>
	</tu-popover>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
			};
		},
	};
</script>

Expand Copy Copy

Attributes

参数	说明	类型	可选值	默认值
trigger	触发方式	String	click/focus/hover/manual	click
title	标题	String	—	—
content	显示的内容，也可以通过 slot 传入 DOM	String	—	—
width	宽度	String, Number	—	最小宽度 150px
placement	出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
disabled	Popover 是否可用	Boolean	—	false
value / v-model	状态是否可见	Boolean	—	false
offset	出现位置的偏移量	Number	—	0
transition	定义渐变动画	String	—	fade-in-linear
visible-arrow	是否显示 Tooltip 箭头	Boolean	—	true
popper-options	popper.js (opens new window) 的参数	Object	参考 popper.js (opens new window) 文档	{ boundariesElement: 'body', gpuAcceleration: false }
popper-class	为 popper 添加类名	String	—	—
open-delay	触发方式为 hover 时的显示延迟，单位为毫秒	Number	—	—
close-delay	触发方式为 hover 时的隐藏延迟，单位为毫秒	number	—	200
tabindex	Popover 组件的 tabindex (opens new window)	number	—	0

Slot

参数	说明
—	Popover 内嵌 HTML 文本
reference	触发 Popover 显示的 HTML 元素

Events

事件名称	说明	回调参数
show	显示时触发	—
after-enter	显示动画播放完毕后触发	—
hide	隐藏时触发	—
after-leave	隐藏动画播放完毕后触发	—