YuePopover 弹出层

YuePopover 是一个非模态 detached 浮层，用于在触发元素附近展示可交互内容。它处理定位、碰撞翻转、Teleport、outside/Escape 关闭、嵌套层级和焦点恢复；菜单导航、模态对话框和 tooltip 专用策略由专用组件负责。

基础交互真实 Teleport 浮层：点击 trigger 打开，Escape 或外部点击关闭。

<YuePopover v-model="open">
  <template #trigger="{ props }">
    <YueButton v-bind="props">打开 Popover</YueButton>
  </template>
  <div>这里可以放置表单、按钮或其他交互内容。</div>
</YuePopover>

定位与交互内容

Popover 只负责把内容放到锚点附近。placement 是首选位置，空间不足时会自动 flip/shift；内容里的表单控件仍然是调用方的真实控件。

筛选面板bottom-start 适合从按钮边缘对齐的面板；点击面板内部默认不会关闭。

<YuePopover v-model="filterOpen" placement="bottom-start">
  <template #trigger="{ props }">
    <YueButton v-bind="props" variant="outline">筛选</YueButton>
  </template>
  <div class="popover-panel">
    <strong>筛选条件</strong>
    <label><input type="checkbox" checked /> 只显示进行中</label>
    <label><input type="checkbox" /> 包含已归档</label>
  </div>
</YuePopover>

Trigger 模式

click 适合稳定的操作面板；hover 与 focus 适合短说明。两者都通过同一个 trigger 插槽传递属性，不会把事件偷偷附加到错误的元素。

hover 与 focustooltip 语义只改变 ARIA 关系，不会凭空增加菜单或对话框行为。

<YuePopover trigger="hover" role="tooltip" placement="top">
  <template #trigger="{ props }">
    <YueButton v-bind="props" variant="text">悬停查看说明</YueButton>
  </template>
  <span>Popover 可以承载可交互内容；纯说明也可以使用 tooltip。</span>
</YuePopover>

<YuePopover trigger="focus" role="tooltip">
  <template #trigger="{ props }">
    <YueButton v-bind="props" variant="text">聚焦查看说明</YueButton>
  </template>
  <span>焦点离开 trigger 或 content 后关闭。</span>
</YuePopover>

外部锚点与手动控制

没有 trigger 插槽时，anchor 提供定位参照物；trigger="manual" 表示组件不安装自动打开/关闭事件，状态完全由调用方掌握。

manual + anchor锚点可以是原生元素；浮层仍然使用同一套碰撞和 Teleport 逻辑。

<button ref="manualAnchor" type="button">外部锚点</button>
<YuePopover
  v-model="manualOpen"
  trigger="manual"
  :anchor="manualAnchor"
  placement="right"
>
  <div>没有 trigger 插槽时，用 anchor 指定定位参照物。</div>
</YuePopover>
<YueButton variant="outline" @click="manualOpen = !manualOpen">
  {{ manualOpen ? '关闭' : '打开' }}
</YueButton>

关闭策略与事件

close-on-content-click 用于完成按钮、选择后关闭等短流程；close 事件会给出 trigger、outside、escape 或 programmatic 原因。

点击内容后关闭事件载荷可以让消费方记录或决定下一步动作。

最近一次关闭：尚未关闭

<YuePopover
  close-on-content-click
  @close="recordClose"
>
  <template #trigger="{ props }">
    <YueButton v-bind="props">点击内容后关闭</YueButton>
  </template>
  <button type="button">完成并关闭</button>
</YuePopover>
<span>最近一次关闭：{{ lastCloseReason }}</span>

典型用法

<YuePopover placement="bottom-start">
  <template #trigger="{ props }">
    <YueButton v-bind="props">筛选</YueButton>
  </template>
  <FilterPanel />
</YuePopover>

组件会在可用空间不足时自动翻转和吸附；滚动、resize 与内容尺寸变化会自动重新定位。

详见 API 和 指南。