Popover - 浮层

更新日期

2026-10-04 UTC

Demo

popover/demo.vue

<template>
  <YlfPopover side="bottom" align="start" aria-label="云乐坊介绍">
    <template #trigger>
      <YlfButton variant="primary">
        打开浮层
      </YlfButton>
    </template>

    <div class="flex flex-col gap-2">
      <p class="m-0 text-sm font-600">
        云乐坊浮层
      </p>
      <p class="m-0 text-sm op-70">
        定位、点击外部关闭、焦点管理都来自 reka-ui，皮肤是云乐坊 token。
      </p>
    </div>
  </YlfPopover>
</template>

浮层：定位、点击外部关闭、焦点管理基于 reka-ui，外观走 token。

Props

属性	说明	类型	默认值
v-model:open	显隐状态	boolean	false
side	方向	top | right | bottom | left	bottom
align	对齐	start | center | end	center
portalTo	已存在的主题内浮层容器	string | HTMLElement	ConfigProvider / body

class、data-*、ARIA 属性和事件传给浮层内容，内部关联 ID 由 Reka UI 管理。默认可访问名称与触发器关联；触发器应使用说明用途的文字。局部主题的 portal-to 容器应处于相同主题边界。

Slots

名称	说明
trigger	触发元素（as-child）
default	浮层内容