Popover 弹出层

AuPopover 是可承载任意 Vue 内容的锚点浮层，提供受控显示、主轴自动翻转、视口避让、点击外部关闭、Escape 关闭和焦点返回。

基础用法

启动时最小化：关闭

<template>
  <div class="popover-demo">
    <AuPopover
      v-model="visible"
      placement="bottom-end"
      :surface="false"
    >
      <template #trigger>
        <AuButton :icon="IconAdjustmentsHorizontal">应用控制</AuButton>
      </template>
      <template #default="{ close }">
        <AuPanel width="320px" depth="overlay">
          <template #header>
            <div class="popover-demo__heading">
              <strong>快速设置</strong>
              <span>常用的显示与启动选项</span>
            </div>
          </template>
          <AuMenuList :elevated="false">
            <AuMenuListItem
              title="启动时最小化"
              description="应用启动后保持在后台"
              :leading-icon="IconWindowMinimize"
              leading-variant="tinted"
            >
              <template #trailing>
                <AuSwitch v-model="startMinimized" />
              </template>
            </AuMenuListItem>
            <AuMenuListItem
              title="打开完整设置"
              :leading-icon="IconSettings"
              leading-variant="tinted"
              accessory="chevron"
              clickable
              @click="selectSettings(close)"
            />
          </AuMenuList>
        </AuPanel>
      </template>
    </AuPopover>
    <span class="popover-demo__state">{{ result }}</span>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import {
  AuButton,
  AuMenuList,
  AuMenuListItem,
  AuPanel,
  AuPopover,
  AuSwitch,
} from 'aurora-plus';
import {
  IconAdjustmentsHorizontal,
  IconSettings,
  IconWindowMinimize,
} from 'aurora-plus/icons';
const visible = ref(false);
const startMinimized = ref(false);
const selectedSettings = ref(false);
const result = computed(() => {
  if (selectedSettings.value) return '已选择：打开完整设置';
  return startMinimized.value ? '启动时最小化：开启' : '启动时最小化：关闭';
});
function selectSettings(close) {
  selectedSettings.value = true;
  close('select', true);
}
</script>
<style scoped>
.popover-demo {
  display: flex;
  min-height: 360px;
  align-items: flex-start;
  gap: 12px;
}
.popover-demo__heading {
  display: grid;
  gap: 3px;
}
.popover-demo__heading strong {
  font-size: var(--au-font-size-large);
  font-weight: var(--au-font-weight-semibold);
}
.popover-demo__heading span,
.popover-demo__state {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.popover-demo__state {
  padding-top: 8px;
}
</style>

Popover API

Attributes

属性	说明	类型	默认值
modelValue / v-model	是否显示浮层	boolean	false
placement	方位，支持 top / right / bottom / left 及 -start / -end	string	bottom
offset	浮层与触发器的距离	number	8
trigger	触发方式，可选 click / manual	string	click
disabled	是否禁用打开	boolean	false
closeOnClickOutside	点击浮层外部时关闭	boolean	true
closeOnPressEscape	按 Escape 时关闭	boolean	true
closeOnContentClick	点击内容后是否关闭	boolean	false
matchTriggerWidth	最小宽度是否匹配触发器	boolean	false
surface	是否提供默认材质、边框和内边距	boolean	true
teleported	是否传送到 appendTo	boolean	true
appendTo	Teleport 目标	string / Element	body
zIndex	基础层级；嵌套时实际层级至少比父浮层高 1	number	1200

Events

事件名	说明	参数
update:modelValue	显示状态变化	(visible)
open / opened	开始打开 / 进入动效完成	—
close	开始关闭	(reason)
closed	离开动效完成	—

Slots

插槽名	作用域参数	说明
trigger		触发元素
default		浮层内容

Exposes

名称	说明
open(focusContent?)	打开浮层，可选择聚焦首个控件
close(reason?, restoreFocus?)	关闭浮层，可选择归还焦点
toggle()	切换显示状态
updatePosition()	重新计算位置
triggerRef / contentRef	触发器外壳与浮层元素引用