Popover 弹出框

在目标元素附近展示一段补充内容或轻量操作。适合报价计算器里的问号说明、字段解释、快捷详情和低风险确认操作。

展示位置

通过 placement 设置弹出位置。位置值由方向和对齐方式组成，例如 top-start、right、bottom-end。

<el-popover title="顶部左对齐" content="展示在触发元素上方，并与左侧对齐。" placement="top-start">
  <template #reference>
    <el-button>top-start</el-button>
  </template>
</el-popover>

<el-popover title="底部右对齐" content="展示在触发元素下方，并与右侧对齐。" placement="bottom-end">
  <template #reference>
    <el-button>bottom-end</el-button>
  </template>
</el-popover>

基础用法

trigger 用于设置触发方式，支持 hover、click、focus、contextmenu。需要手动控制显示时，可以使用 visible 或 v-model:visible。

<template>
  <el-popover
    placement="top-start"
    title="报价说明"
    :width="220"
    trigger="hover"
    content="鼠标悬停时展示。"
  >
    <template #reference>
      <el-button>Hover</el-button>
    </template>
  </el-popover>

  <el-popover v-model:visible="visible" title="手动控制" content="通过 visible 控制显示。">
    <template #reference>
      <el-button @click="visible = !visible">Manual</el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

报价说明

Popover 适合承载报价计算器里的问号说明。对短文案优先使用 content；当说明包含分段、标签或操作时，使用默认插槽。

综合服务费

材料损耗率

<template>
  <el-popover
    placement="top"
    title="综合服务费"
    :width="260"
    trigger="hover"
    content="综合服务费包含方案复核、项目协调、交付跟进等服务成本。"
  >
    <template #reference>
      <el-button circle size="small">
        <el-icon><QuestionFilled /></el-icon>
      </el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue'
</script>

内容可扩展

默认插槽可以放入表格、描述列表、标签和按钮等组件，适合展示比 Tooltip 更丰富的信息。

HV

<template>
  <el-popover placement="right" :width="460" trigger="click">
    <template #reference>
      <el-button>查看费用明细</el-button>
    </template>
    <el-table :data="costData" size="small">
      <el-table-column property="name" label="费用项" width="140" />
      <el-table-column property="amount" label="金额" width="120" />
      <el-table-column property="remark" label="说明" />
    </el-table>
  </el-popover>
</template>

嵌套操作

Popover 可以承载轻量操作，比 Dialog 更轻。适合影响范围较小、无需复杂表单的确认流程。

<template>
  <el-popover v-model:visible="visible" placement="top" :width="220">
    <p>确认移除此报价项？</p>
    <div style="text-align: right">
      <el-button size="small" text @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="visible = false">确认</el-button>
    </div>
    <template #reference>
      <el-button type="danger" @click="visible = true">删除报价项</el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

虚拟触发

当触发元素和 Popover 内容分离时，可以使用 virtual-triggering 和 virtual-ref 指定触发元素。v-popover 指令不再推荐使用。

<template>
  <el-button ref="buttonRef">虚拟触发按钮</el-button>
  <el-popover
    :virtual-ref="buttonRef"
    virtual-triggering
    trigger="click"
    title="虚拟触发"
    content="这个弹出框通过 virtual-ref 绑定到按钮。"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonRef = ref()
</script>

自定义样式

通过 width、effect、offset、show-arrow、popper-class 和 popper-style 可以调整 Popover 的尺寸、主题和浮层样式。

<el-popover title="深色主题" effect="dark" :width="220" :offset="12">
  <template #reference>
    <el-button>Dark</el-button>
  </template>
  适合在深色浮层中强调提示信息。
</el-popover>

<el-popover title="无箭头" :show-arrow="false" content="隐藏箭头。">
  <template #reference>
    <el-button>No arrow</el-button>
  </template>
</el-popover>

Popover API

Popover 属性

属性名	说明	类型	默认值
trigger	触发方式，受控模式下无效	hover | click | focus | contextmenu / array	hover
trigger-keys	通过键盘控制弹出框显示的按键代码，受控模式下无效	array	['Enter', 'Space']
title	标题	string	-
effect	Tooltip 主题	dark | light / string	light
content	显示内容，也可以通过默认插槽修改	string	''
width	宽度	string | number	150
placement	出现位置	enum	bottom
disabled	Popover 是否禁用	boolean	false
visible / v-model:visible	Popover 是否显示	boolean | null	null
offset	浮层偏移量	number	undefined
transition	渐变动画	string	el-fade-in-linear
show-arrow	是否显示箭头	boolean	true
popper-options	popper.js 参数	object	{ modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }
popper-class	为 popper 添加类名	string	-
popper-style	为 popper 自定义样式	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	浮层挂载到哪个元素	CSSSelector | HTMLElement	body
persistent	长时间不触发且设为 false 时是否删除 Popover	boolean	true
virtual-triggering	是否启用虚拟触发	boolean	false
virtual-ref	虚拟触发时的参照元素	HTMLElement	-

Popover 插槽

插槽名	说明	类型
default	弹出框内容，2.13.4 及之后版本可以接收 hide 参数	object
reference	触发弹出框的 HTML 元素，只接受单个根元素	-

Popover 事件

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

Popover 暴露

名称	说明	类型
hide	隐藏 Popover	Function