Popover 气泡卡片

基础用法

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

trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click、focus 或 contextmenu。 如果你想手动控制它，你可以设置 v-model:visible。

Popover 弹出框 - 图1

  1. <template>
  2.   <el-popover
  3.     placement="top-start"
  4.     title="Title"
  5.     :width="200"
  6.     trigger="hover"
  7.     content="this is content, this is content, this is content"
  8.   >
  9.     <template #reference>
  10.       <el-button>Hover to activate</el-button>
  11.     </template>
  12.   </el-popover>
  14.   <el-popover
  15.     placement="bottom"
  16.     title="Title"
  17.     :width="200"
  18.     trigger="click"
  19.     content="this is content, this is content, this is content"
  20.   >
  21.     <template #reference>
  22.       <el-button>Click to activate</el-button>
  23.     </template>
  24.   </el-popover>
  26.   <el-popover
  27.     ref="popover"
  28.     placement="right"
  29.     title="Title"
  30.     :width="200"
  31.     trigger="focus"
  32.     content="this is content, this is content, this is content"
  33.   >
  34.     <template #reference>
  35.       <el-button>Focus to activate</el-button>
  36.     </template>
  37.   </el-popover>
  39.   <el-popover
  40.     ref="popover"
  41.     title="Title"
  42.     :width="200"
  43.     trigger="contextmenu"
  44.     content="this is content, this is content, this is content"
  45.   >
  46.     <template #reference>
  47.       <el-button>contextmenu to activate</el-button>
  48.     </template>
  49.   </el-popover>
  51.   <el-popover
  52.     :visible="visible"
  53.     placement="bottom"
  54.     title="Title"
  55.     :width="200"
  56.     content="this is content, this is content, this is content"
  57.   >
  58.     <template #reference>
  59.       <el-button @click="visible = !visible">Manual to activate</el-button>
  60.     </template>
  61.   </el-popover>
  62. </template>
  64. <script lang="ts" setup>
  65. import { ref } from 'vue'
  67. const visible = ref(false)
  68. </script>

虚拟触发

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

WARNING

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

Popover 弹出框 - 图2

  1. <template>
  2.   <el-button ref="buttonRef" v-click-outside="onClickOutside"
  3.     >Click me</el-button
  4.   >
  6.   <el-popover
  7.     ref="popoverRef"
  8.     :virtual-ref="buttonRef"
  9.     trigger="click"
  10.     title="With title"
  11.     virtual-triggering
  12.   >
  13.     <span> Some content </span>
  14.   </el-popover>
  15. </template>
  17. <script setup lang="ts">
  18. import { ref, unref } from 'vue'
  19. import { ClickOutside as vClickOutside } from 'element-plus'
  20. const buttonRef = ref()
  21. const popoverRef = ref()
  22. const onClickOutside = () => {
  23.   unref(popoverRef).popperRef?.delayHide?.()
  24. }
  25. </script>

内容可扩展

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

利用插槽取代 content 属性

Popover 弹出框 - 图3

  1. <template>
  2.   <div style="display: flex; align-items: center">
  3.     <el-popover placement="right" :width="400" trigger="click">
  4.       <template #reference>
  5.         <el-button style="margin-right: 16px">Click to activate</el-button>
  6.       </template>
  7.       <el-table :data="gridData">
  8.         <el-table-column width="150" property="date" label="date" />
  9.         <el-table-column width="100" property="name" label="name" />
  10.         <el-table-column width="300" property="address" label="address" />
  11.       </el-table>
  12.     </el-popover>
  14.     <el-popover
  15.       :width="300"
  16.       popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
  17.     >
  18.       <template #reference>
  19.         <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
  20.       </template>
  21.       <template #default>
  22.         <div
  23.           class="demo-rich-conent"
  24.           style="display: flex; gap: 16px; flex-direction: column"
  25.         >
  26.           <el-avatar
  27.             :size="60"
  28.             src="https://avatars.githubusercontent.com/u/72015883?v=4"
  29.             style="margin-bottom: 8px"
  30.           />
  31.           <div>
  32.             <p
  33.               class="demo-rich-content__name"
  34.               style="margin: 0; font-weight: 500"
  35.             >
  36.               Element Plus
  37.             </p>
  38.             <p
  39.               class="demo-rich-content__mention"
  40.               style="margin: 0; font-size: 14px; color: var(--el-color-info)"
  41.             >
  42.               @element-plus
  43.             </p>
  44.           </div>
  46.           <p class="demo-rich-content__desc" style="margin: 0">
  47.             Element Plus, a Vue 3 based component library for developers,
  48.             designers and product managers
  49.           </p>
  50.         </div>
  51.       </template>
  52.     </el-popover>
  53.   </div>
  54. </template>
  56. <script lang="ts" setup>
  57. const gridData = [
  58.   {
  59.     date: '2016-05-02',
  60.     name: 'Jack',
  61.     address: 'New York City',
  62.   },
  63.   {
  64.     date: '2016-05-04',
  65.     name: 'Jack',
  66.     address: 'New York City',
  67.   },
  68.   {
  69.     date: '2016-05-01',
  70.     name: 'Jack',
  71.     address: 'New York City',
  72.   },
  73.   {
  74.     date: '2016-05-03',
  75.     name: 'Jack',
  76.     address: 'New York City',
  77.   },
  78. ]
  79. </script>

嵌套操作

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

Popover 弹出框 - 图4

  1. <template>
  2.   <el-popover v-model:visible="visible" placement="top" :width="160">
  3.     <p>Are you sure to delete this?</p>
  4.     <div style="text-align: right; margin: 0">
  5.       <el-button size="small" text @click="visible = false">cancel</el-button>
  6.       <el-button size="small" type="primary" @click="visible = false"
  7.         >confirm</el-button
  8.       >
  9.     </div>
  10.     <template #reference>
  11.       <el-button @click="visible = true">Delete</el-button>
  12.     </template>
  13.   </el-popover>
  14. </template>
  16. <script lang="ts" setup>
  17. import { ref } from 'vue'
  19. const visible = ref(false)
  20. </script>

指令

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

Popover 弹出框 - 图5

  1. <template>
  2.   <el-button v-popover="popoverRef" v-click-outside="onClickOutside"
  3.     >Click me</el-button
  4.   >
  6.   <el-popover
  7.     ref="popoverRef"
  8.     trigger="click"
  9.     title="With title"
  10.     virtual-triggering
  11.     persistent
  12.   >
  13.     <span> Some content </span>
  14.   </el-popover>
  15. </template>
  17. <script setup lang="ts">
  18. import { ref, unref } from 'vue'
  19. import { ClickOutside as vClickOutside } from 'element-plus'
  20. const buttonRef = ref()
  21. const popoverRef = ref()
  22. const onClickOutside = () => {
  23.   unref(popoverRef).popperRef?.delayHide?.()
  24. }
  25. </script>

Popover 属性

属性说明类型可选值默认值
trigger触发方式stringclick/focus/hover/contextmenuclick
title标题string——
effectTooltip 主题，Element Plus 内置了 dark / light 两种主题stringstringlight
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 是否可用boolean—false
visible / v-model:visiblePopover 是否显示Boolean—false
offset出现位置的偏移量number—0
transition定义渐变动画string—el-fade-in-linear
show-arrow是否显示 Tooltip 箭头， 欲了解更多信息，请参考 ElPopper Popover 弹出框 - 图6boolean—true
popper-optionspopper.js Popover 弹出框 - 图7 的参数object详情参考 popper.js Popover 弹出框 - 图8{ boundariesElement: ‘body’, gpuAcceleration: false }
popper-class为 popper 添加类名string——
show-after延迟出现，单位毫秒number—0
hide-after延迟关闭，单位毫秒number—200
auto-closeTooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏number—0
tabindexPopover 组件的 tabindex Popover 弹出框 - 图9number——
teleported是否将 popover 的下拉列表插入至 body 元素booleantrue / falsetrue
persistent当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除boolean—true

Popover 插槽

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

Popover 事件

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

源代码

组件 Popover 弹出框 - 图10 • 文档 Popover 弹出框 - 图11

贡献者

Popover 弹出框 - 图12 三咲智子

Popover 弹出框 - 图13 JeremyWuuuuu

Popover 弹出框 - 图14 云游君

Popover 弹出框 - 图15 啝裳

Popover 弹出框 - 图16 btea

Popover 弹出框 - 图17 zz

Popover 弹出框 - 图18 Xc

Popover 弹出框 - 图19 msidolphin

Popover 弹出框 - 图20 Alan Wang

Popover 弹出框 - 图21 C.Y.Kun

Popover 弹出框 - 图22 kooriookami

Popover 弹出框 - 图23 Delyan Haralanov

Popover 弹出框 - 图24 bqy

Popover 弹出框 - 图25 BigPengZai

Popover 弹出框 - 图26 Aex

Popover 弹出框 - 图27 zouhang

Popover 弹出框 - 图28 on the field of hope

Popover 弹出框 - 图29 Hades-li

Popover 弹出框 - 图30 Ghislain B