Popover 弹出框

通用的悬浮信息容器，比 Tooltip 更强大，可嵌入复杂内容和操作（按钮、表单等）。

基础用法

使用 content 属性设置弹出内容，trigger 默认为 click。

<template>
  <ZcPopover content="这是一段弹出内容">
    <ZcButton>点击弹出</ZcButton>
  </ZcPopover>
</template>

标题与内容

通过 title 和 content 属性设置标题和内容。

<template>
  <ZcPopover title="标题" content="这是一段详细的说明内容，可以放置较长的文本。">
    <ZcButton>带标题的弹出</ZcButton>
  </ZcPopover>
</template>

触发方式

支持 click、hover、focus、contextmenu 四种触发方式。

<template>
  <ZcSpace>
    <ZcPopover trigger="click" content="click 触发">
      <ZcButton>Click</ZcButton>
    </ZcPopover>
    <ZcPopover trigger="hover" content="hover 触发" :show-delay="0" :hide-delay="0">
      <ZcButton>Hover</ZcButton>
    </ZcPopover>
    <ZcPopover trigger="focus" content="focus 触发">
      <ZcButton>Focus</ZcButton>
    </ZcPopover>
    <ZcPopover trigger="contextmenu" content="右键触发">
      <ZcButton>右键菜单</ZcButton>
    </ZcPopover>
  </ZcSpace>
</template>

弹出位置

支持 12 个方向的弹出位置。

<template>
  <ZcSpace wrap>
    <ZcPopover placement="top" content="上方弹出">
      <ZcButton size="small">Top</ZcButton>
    </ZcPopover>
    <ZcPopover placement="top-start" content="左上方弹出">
      <ZcButton size="small">Top Start</ZcButton>
    </ZcPopover>
    <ZcPopover placement="top-end" content="右上方弹出">
      <ZcButton size="small">Top End</ZcButton>
    </ZcPopover>
    <ZcPopover placement="bottom" content="下方弹出">
      <ZcButton size="small">Bottom</ZcButton>
    </ZcPopover>
    <ZcPopover placement="bottom-start" content="左下方弹出">
      <ZcButton size="small">Bottom Start</ZcButton>
    </ZcPopover>
    <ZcPopover placement="bottom-end" content="右下方弹出">
      <ZcButton size="small">Bottom End</ZcButton>
    </ZcPopover>
    <ZcPopover placement="left" content="左侧弹出">
      <ZcButton size="small">Left</ZcButton>
    </ZcPopover>
    <ZcPopover placement="right" content="右侧弹出">
      <ZcButton size="small">Right</ZcButton>
    </ZcPopover>
  </ZcSpace>
</template>

自定义内容

通过 content 插槽可以嵌入任意内容（按钮、表单等）。

<template>
  <ZcPopover trigger="click" :width="280">
    <template #content>
      <div style="display: flex; flex-direction: column; gap: 8px;">
        <p>请选择操作：</p>
        <ZcSpace>
          <ZcButton size="small" type="primary">确定</ZcButton>
          <ZcButton size="small">取消</ZcButton>
        </ZcSpace>
      </div>
    </template>
    <ZcButton>自定义内容</ZcButton>
  </ZcPopover>
</template>

v-model 控制显隐

通过 v-model:visible 双向绑定控制 Popover 的显示与隐藏。

<template>
  <ZcSpace>
    <ZcPopover v-model:visible="visible" content="通过 v-model 控制">
      <ZcButton>{{ visible ? '点击关闭' : '点击打开' }}</ZcButton>
    </ZcPopover>
    <ZcButton type="primary" @click="visible = !visible">外部切换</ZcButton>
  </ZcSpace>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

Popover API

Props

参数	说明	类型	默认值
title	弹出框标题	string	''
content	弹出框内容文本	string	''
visible	是否显示 (v-model:visible)	boolean	false
placement	弹出位置	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	'bottom'
trigger	触发方式	'hover' | 'click' | 'focus' | 'contextmenu'	'click'
showDelay	显示延迟（毫秒，仅 hover）	number	100
hideDelay	隐藏延迟（毫秒，仅 hover）	number	100
disabled	是否禁用	boolean	false
showArrow	是否显示箭头	boolean	true
popperClass	自定义类名	string	''
width	弹出框宽度（px 或 CSS 字符串）	number | string	-
minWidth	弹出框最小宽度（px 或 CSS 字符串）	number | string	-
transition	过渡动画名称	string	'zc-popover'
offset	触发元素与弹出框之间的间距（px）	number	8
hideAfterClickOutside	点击外部是否自动关闭	boolean	true

Events

事件名	说明	回调参数
update:visible	显隐状态变化时触发
show	显示时触发
hide	隐藏时触发
after-enter	显示动画结束后触发
after-leave	隐藏动画结束后触发

Slots

插槽名	说明
default	触发元素
title	标题内容
content	弹出内容（支持任意 HTML/Vue 组件）

Exposed Methods

方法名	说明	参数
show()	手动显示弹出框
hide()	手动隐藏弹出框
toggle()	切换显示/隐藏
updatePosition()	手动更新弹出框位置