Popover 气泡卡片

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (例如: VitePress).

基础用法

Popover 是在 ElTooltip 基础上开发出来的。因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

虚拟触发

像 Tooltip一样，Popover 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景。通常我们使用 #reference 来放置我们的触发元素，用 triggering-element API，您可以任意设置您的触发元素但注意到触发元素应该是接受 mouse 和 keyboard 事件的元素。

WARNING

v-popover 将被废弃，请使用 virtual-ref 作为替代。

内容可扩展

可以在 Popover 中嵌套其它组件，以下为嵌套表格的例子。

嵌套操作

当然，你还可以嵌套操作，它比使用dialog更加轻量。

指令

您可以使用指令性方式弹出窗口，但这种方法不再推荐 ，因为这使得应用程序变得复杂，您可以参考虚拟触发来实现一样的效果。

Attributes

属性名	说明	类型	可选值	默认值
trigger	触发方式	string	click/focus/hover/contextmenu	hover
title	标题	string	—	—
effect	Tooltip 主题，Element Plus 内置了 `dark` / `light` 两种主题	string	string	light
content	显示的内容，也可以通过写入默认 `slot` 修改显示内容	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
visible / v-model:visible	Popover 是否显示	Boolean	—	false
offset	浮层偏移量, `Popover` 是在 `Tooltip`,基础上开发的， `Popover`的 offset 是 `undefined`, 但`Tooltip` 的 offset 是12	number	—	12
transition	定义渐变动画	string	—	el-fade-in-linear
show-arrow	是否显示 Tooltip 箭头，欲了解更多信息，请参考 ElPopper	boolean	—	true
popper-options	popper.js 的参数	object	详情参考 popper.js	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
popper-class	为 popper 添加类名	string	—	—
popper-style	为 popper 自定义样式	string / object	—	—
show-after	在触发后多久显示内容，单位毫秒	number	—	0
hide-after	延迟关闭，单位毫秒	number	—	200
auto-close	tooltip 出现后自动隐藏延时，单位毫秒	number	—	0
tabindex	Popover 组件的 tabindex	number	—	—
teleported	是否将 popover 的下拉列表插入至 body 元素	boolean	true / false	true
persistent	当 popover 组件长时间不触发且 `persistent` 属性设置为 `false` 时, popover 将会被删除	boolean	—	true

Slots

插槽名	说明
—	Popover 内嵌 HTML 文本
reference	触发 Popover 显示的 HTML 元素

Events

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