Popover 气泡卡片

基础用法

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

trigger 属性被用来决定 popover 的触发方式,支持的触发方式: hoverclickfocuscontextmenu。 如果你想手动控制它,可以设置 :visible 属性。

虚拟触发

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

WARNING

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

内容可扩展

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

利用插槽取代 content 属性

嵌套操作

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

指令

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

API

Attributes

属性名说明类型Default
trigger触发方式enumhover
title标题string
effectTooltip 主题,Element Plus 内置了 dark / light 两种主题enum / stringlight
content显示的内容,也可以通过写入默认 slot 修改显示内容string''
width宽度string / number150
placement出现位置enumbottom
disabledPopover 是否可用booleanfalse
visible / v-model:visiblePopover 是否显示boolean / nullnull
offset浮层偏移量, Popover 是在 Tooltip,基础上开发的, Popover的 offset 是 undefined, 但Tooltip 的 offset 是12numberundefined
transition定义渐变动画,默认是 el-fade-in-linearstring
show-arrow是否显示 Tooltip 箭头, 欲了解更多信息,请参考 ElPopperbooleantrue
popper-optionspopper.js 的参数object{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
popper-class为 popper 添加类名string
popper-style为 popper 自定义样式string / object
show-after在触发后多久显示内容,单位毫秒number0
hide-after延迟关闭,单位毫秒number200
auto-closetooltip 出现后自动隐藏延时,单位毫秒number0
tabindexPopover 组件的 tabindexnumber / string0
teleported是否将 popover 的下拉列表插入至 body 元素booleantrue
persistent当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除booleantrue

Slots

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

Events

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

Exposes

名称详情类型
hide隐藏 popoverFunction

源代码

组件样式文档

贡献者