Popover 弹出框

位置

Popover 有 9 种弹出位置。

使用属性 content 来设置悬停时显示的显示内容。属性 placement 决定了 Popover 的位置。其值为 [orientation]-[alignment]，包含四个方向 top、left、right、bottom 和三个对齐方式 start、end、null，默认对齐方式为 null。以 placement="left-end" 为例，Popover 将显示在您悬停的元素的左侧，且 Popover 的底部与元素的底部对齐。

vue

<template>
  <div class="popover-base-box">
    <div class="row center">
      <el-popover
        title="Title"
        content="Top Left prompts info"
        placement="top-start"
      >
        <template #reference>
          <el-button>top-start</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Top Center prompts info"
        placement="top"
      >
        <template #reference>
          <el-button>top</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Top Right prompts info"
        placement="top-end"
      >
        <template #reference>
          <el-button>top-end</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Top prompts info"
        placement="left-start"
      >
        <template #reference>
          <el-button>left-start</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Top prompts info"
        placement="right-start"
      >
        <template #reference>
          <el-button>right-start</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Center prompts info"
        placement="left"
      >
        <template #reference>
          <el-button class="mt-3 mb-3">left</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Center prompts info"
        placement="right"
      >
        <template #reference>
          <el-button>right</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <template #reference>
          <el-button>left-end</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <template #reference>
          <el-button>right-end</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row center">
      <el-popover
        title="Title"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <template #reference> <el-button>bottom-start</el-button></template>
      </el-popover>
      <el-popover
        title="Title"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <template #reference> <el-button>bottom</el-button></template>
      </el-popover>
      <el-popover
        title="Title"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <template #reference>
          <el-button>bottom-end</el-button>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style>
.popover-base-box {
  width: 600px;
}

.popover-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover-base-box .center {
  justify-content: center;
}
</style>

基础用法

Popover 是基于 ElTooltip 构建的。因此对于一些重复的属性，请参考 Tooltip 的文档。

trigger 属性用于定义弹出框如何触发：hover、click、focus 或 contextmenu。如果您想手动控制它，可以设置 :visible。

虚拟触发

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

警告

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

富文本内容

Popover 内可以嵌套其他组件/元素。以下是嵌套表格的示例。

将 content 属性替换为默认 slot。

vue

<template>
  <div style="display: flex; align-items: center">
    <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button style="margin-right: 16px">Click to activate</el-button>
      </template>
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="date" />
        <el-table-column width="100" property="name" label="name" />
        <el-table-column width="300" property="address" label="address" />
      </el-table>
    </el-popover>

    <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://avatars.githubusercontent.com/u/72015883?v=4"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Element Plus
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @element-plus
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            Element Plus, a Vue 3 based component library for developers,
            designers and product managers
          </p>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]
</script>

嵌套操作

当然，你也可以嵌套其他操作。这比使用对话框更轻量。

指令

您仍然可以以指令的方式使用 popover，但不再推荐这样做，因为这会使您的应用程序变得复杂，您可以参考虚拟触发以获取更多信息。

API

属性

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

插槽

名称	描述	类型
default	弹出框内容，版本 2.13.4 及以后可以接收 hide 参数。	`object`
reference	触发弹出框的 HTML 元素，仅接受单个根元素	-

事件

名称	描述	类型
show	弹出框显示时触发	`Function`
before-enter	进入动画开始前触发	`Function`
after-enter	进入动画结束时触发	`Function`
hide	弹出框隐藏时触发	`Function`
before-leave	离开动画开始前触发	`Function`
after-leave	离开动画结束时触发	`Function`