Popover 弹出层

MoPopover 和 MoMenu 的触发、定位方式类似，但面板内容完全由插槽自定义，适合筛选器、快捷表单、信息卡片和操作面板。

基础用法

Light

Dark

<MoPopover>
  <template #trigger="{ open }">
    <MoButton>{{ open ? "收起" : "打开" }}</MoButton>
  </template>

  <div>自定义内容</div>
</MoPopover>

表单内容

Light

Dark

<MoPopover :width="360" placement="bottom-start">
  <template #trigger>
    <MoButton>筛选条件</MoButton>
  </template>

  <template #default="slotProps">
    <MoInput placeholder="请输入名称" />
    <MoButton @click="slotProps?.close?.()">应用</MoButton>
  </template>
</MoPopover>

位置和宽度

Light

Dark

<MoPopover placement="bottom-end" :width="280">
  <template #trigger>
    <MoButton>打开</MoButton>
  </template>
  <div>自定义内容</div>
</MoPopover>

API

属性	说明	类型	默认值
theme	主题	light | dark	light
placement	弹出位置	auto | bottom-start | bottom-end | top-start | top-end	auto
width	面板宽度	string | number	320
zIndex	面板层级	number	9999
teleported	是否挂载到 body	boolean	true
offset	触发器和面板间距	number	8

Slots

插槽	说明
trigger	触发器，参数 { open }
default	自定义面板内容，参数 { close }