弹出框组件 (Popover)

Element-UI 的 Popover 组件用于展示额外信息或提示内容，通常在用户悬停、点击或聚焦某个元素时显示。它类似于 Tooltip，但内容更加丰富，可以包含任何类型的 DOM 元素。

提示

Popover 组件官方文档：https://element.eleme.cn/#/zh-CN/component/popover (opens new window)

1. 基本用法

基本语法：使用 <el-popover> 标签创建一个弹出框，通过 trigger 属性控制弹出方式，通过 placement 属性控制弹出框的位置。可以通过 slot 传入内容。

<template>
  <el-popover
    ref="popover"
    placement="top"
    width="200"
    trigger="hover"
    content="这是一段内容">
    <el-button slot="reference">悬停我显示 Popover</el-button>
  </el-popover>
</template>

• 触发方式：通过 trigger 属性设置触发弹出框的方式，可以是 click、focus、hover 或 manual。
• 内容传递：可以通过 content 属性或默认插槽传入弹出框显示的内容。
• 位置控制：使用 placement 属性设置弹出框出现的位置。
• 

Popover 属性

参数	说明	类型	可选值	默认值
trigger	触发方式	String	click/focus/hover/manual	click
title	标题	String	—	—
content	显示的内容，也可以通过 slot 传入 DOM	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
value / v-model	状态是否可见	Boolean	—	false
offset	出现位置的偏移量	Number	—	0
transition	定义渐变动画	String	—	fade-in-linear
visible-arrow	是否显示 Tooltip 箭头	Boolean	—	true
popper-options	popper.js 的参数	Object	参考 popper.js 文档	{ boundariesElement: 'body', gpuAcceleration: false }
popper-class	为 popper 添加类名	String	—	—
open-delay	触发方式为 hover 时的显示延迟，单位为毫秒	Number	—	—
close-delay	触发方式为 hover 时的隐藏延迟，单位为毫秒	Number	—	200
tabindex	Popover 组件的 tabindex	Number	—	0

Popover 方法

Popover 组件本身没有定义特定的方法，但可以使用 v-model 结合 trigger="manual" 的方式手动控制弹出框的显示和隐藏。

Popover 事件

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

Popover 插槽

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

2. 常用示例

1. 点击触发的 Popover

通过 trigger="click" 属性实现点击触发 Popover 显示。

<template>
  <el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容">
    <el-button slot="reference">点击我显示 Popover</el-button>
  </el-popover>
</template>

• 点击触发：设置 trigger="click" 后，用户点击按钮即可显示 Popover。
• 

2. 手动控制显示的 Popover

通过 trigger="manual" 和 v-model 属性手动控制 Popover 的显示和隐藏。

<template>
  <el-popover
    placement="right"
    width="200"
    trigger="manual"
    v-model="visible"
    content="这是一段内容">
    <el-button slot="reference" @click="visible = !visible">手动控制 Popover</el-button>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      visible: false // 控制 Popover 显示状态
    };
  }
};
</script>

• 手动控制：通过 trigger="manual" 和 v-model 可以手动控制 Popover 的显示状态。
• 

3. 自定义内容的 Popover

通过 slot 插槽传入自定义的 HTML 内容。

<template>
  <el-popover placement="left" width="200" trigger="hover">
    <p>这是一段自定义内容，可以包括任何 HTML 元素。</p>
    <el-button type="text" size="mini">按钮</el-button>
    <template slot="reference">
      <el-button>悬停我显示 Popover</el-button>
    </template>
  </el-popover>
</template>

• 自定义内容：通过默认插槽可以传入自定义的 HTML 内容，使 Popover 更加灵活。
• 

4. 带有延迟的 Popover

通过 open-delay 和 close-delay 属性设置 Popover 的显示和隐藏延迟时间。

<template>
  <el-popover
    placement="top"
    width="200"
    trigger="hover"
    content="这是一段内容"
    :open-delay="300"
    :close-delay="500">
    <el-button slot="reference">悬停有延迟 Popover</el-button>
  </el-popover>
</template>

• 延迟显示：通过 open-delay 和 close-delay 设置 Popover 的显示和隐藏延迟，使用户体验更流畅。
• 

5. 禁用状态的 Popover

通过 disabled 属性控制 Popover 是否可用。

<template>
  <el-popover
    placement="bottom"
    width="200"
    trigger="hover"
    content="Popover 已被禁用"
    :disabled="true">
    <el-button slot="reference">禁用的 Popover</el-button>
  </el-popover>
</template>

• 禁用状态：设置 disabled 属性为 true 时，Popover 不会被触发显示。
• 

总结

• 灵活的触发方式：Popover 支持点击、悬停、聚焦和手动控制等多种触发方式，适应不同场景的需求。
• 自定义内容：通过插槽可以轻松定制 Popover 显示的内容，使其不仅限于文本提示。
• 延迟与动画：提供了 open-delay、close-delay 等属性，以及 transition 动画控制，使 Popover 的显示更加平滑自然。