Popover 气泡卡片

基础用法

与Tooltip相似,Popover也是基于ElPopper的构建。 因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。

虚拟触发

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

WARNING

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

内容可扩展

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

嵌套操作

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

指令

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

Popover 属性

属性说明类型可选值默认值
trigger触发方式stringclick/focus/hover/contextmenuclick
title标题string
effectTooltip 主题,Element Plus 内置了 dark / light 两种主题stringstringdark
content显示的内容,也可以通过写入默认 slot 修改显示内容string
width宽度string / number最小宽度 150px
placement出现位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
disabledPopover 是否可用booleanfalse
visible / v-model:visiblePopover 是否显示Booleanfalse
offset出现位置的偏移量number0
transition定义渐变动画stringel-fade-in-linear
show-arrow是否显示 Tooltip 箭头, 欲了解更多信息,请参考 ElPopperbooleantrue
popper-optionspopper.js 的参数object详情参考 popper.js{ boundariesElement: 'body', gpuAcceleration: false }
popper-class为 popper 添加类名string
show-after延迟出现,单位毫秒number0
hide-after延迟关闭,单位毫秒number200
auto-closeTooltip 出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏number0
tabindexPopover 组件的 tabindexnumber
teleported是否将 popover 的下拉列表插入至 body 元素booleantrue / falsetrue
persistent当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除booleantrue

Popover 插槽

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

Popover 事件

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

源代码

组件文档

贡献者