Popover - 浮层

Demo

更新日期

2026-09-25 UTC

popover/demo.vue

<template>
  <YlfPopover side="bottom" align="start">
    <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

Slots

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