Popover 弹出框

位置

Popover 有 9 种位置。

基础用法

Popover 是基于 ElTooltip 实现的，所以一些重复的属性，请参考 Tooltip 的文档。

虚拟触发

和 Tooltip 一样，Popover 组件也支持通过虚拟元素触发。如果您的使用场景包括将触发元素和内容元素分开，您应该使用该机制。通常我们使用 #reference 插槽来放置我们的触发元素，通过 triggering-element API，您可以将触发元素设置在任何您喜欢的地方。但请注意，触发元素应该是一个接受 mouse 和 keyboard 事件的元素。

警告

v-popover 指令即将被废弃。请使用 virtual-ref 作为替代方案。

富文本内容

可以在 popover 中嵌套其他组件/元素。下面是一个嵌套表格的例子。

嵌套操作

当然，你可以嵌套任何你想要的操作。比起dialog，它更轻量。

指令

您仍然可以通过指令的方式使用 Popover，但我们**不再推荐**这样做，因为它会使您的应用程序复杂化。您可以参考虚拟触发以获取更多信息。

API

属性

名称	描述	类型	默认值
trigger	如何触发 popover，在受控模式下无效	`枚举` / `对象`	悬浮时
trigger-keys 2.9.8	当您点击鼠标聚焦于触发元素时，可以通过键盘定义一组键盘码来控制 popover 的显示，在受控模式下无效	`数组`	['Enter','Space']
title	popover 标题	`string`	—
effect	Tooltip 的主题，内置主题：`dark` / `light`	`enum` / `string`	light
content	popover 内容，可以用一个默认的 `slot` 替换	`string`	''
width	popover 宽度	`string` / `number`	150
placement	popover 的位置	`枚举`	bottom
disabled	Popover 是否被禁用	`boolean`	false
visible / v-model:visible	popover 是否可见	`boolean` / `null`	null
offset	popover 的偏移量，`Popover` 是基于 `Tooltip` 构建的，`Popover` 的偏移量是 `undefined`，但 `Tooltip` 的偏移量是 12	`number`	undefined
transition	popover 淡入淡出动画，默认为 el-fade-in-linear	`string`	—
show-arrow	是否显示 tooltip 箭头。更多信息，请参考 ElPopper	`boolean`	true
popper-options	popper.js 的参数	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
popper-class	为 popover 自定义类名	`string`	—
popper-style	为 popover 自定义样式	`string` / `object`	—
show-after	触发后延迟毫秒，在受控模式下无效	`number`	0
hide-after	消失延迟，单位毫秒，在受控模式下无效	`number`	200
auto-close	tooltip 在毫秒后消失，在受控模式下无效	`number`	0
tabindex	Popover 的 tabindex	`number` / `string`	0
teleported	popover 下拉列表是否传送到 body	`boolean`	true
append-to 2.9.10	popover 的内容附加到哪个元素	`CSSSelector` / `HTMLElement`	body
persistent	当 popover 不活跃且 `persistent` 为 `false` 时，popover 将被销毁	`boolean`	true
virtual-triggering	指示是否启用虚拟触发	`boolean`	—
virtual-ref	指示 popover 附加到的引用元素	`HTMLElement`	—
tooltip	继承 Tooltip 的所有属性	—	—

插槽

名称	描述
default	popover 的文本内容
reference	触发 popover 的 HTML 元素，只接受单个根元素

事件

名称	描述	类型
show	当 popover 显示时触发	`Function`
before-enter	在进入动画前触发	`Function`
after-enter	在进入动画结束后触发	`Function`
hide	当 popover 隐藏时触发	`Function`
before-leave	在离开动画前触发	`Function`
after-leave	在离开动画结束后触发	`Function`