Popover 组件

Popover 适合做局部解释、短操作、表单补充和标题补全。

基础用法

<Popover title="提示" placement="bottom" with-arrow>
  <template #trigger>
    <LinkButton text="点击查看提示" variant="soft" />
  </template>
  这里可以放短说明。
</Popover>

With Arrow

Arrow

Colors

Placements

Offset

Controlled

Title Props

With Form

Backdrop

Custom Motion

Custom Trigger

Ctrl+Shift+P

在 Accordion 中使用

Props

参数	类型	默认值	说明	示例
open	boolean | undefined	undefined	受控打开状态，配合 v-model:open 使用。	v-model:open="open"
defaultOpen	boolean	false	非受控初始打开状态。	:default-open="true"
trigger	click | hover | both	click	触发方式。	trigger="hover"
placement	top | bottom | left | right 等	bottom	浮层位置。	placement="top-start"
offset	number	8	与触发元素的间距。	:offset="0"
withArrow	boolean	false	是否显示箭头。	with-arrow
color	default | primary | success | warning | danger	default	浮层边框强调色。	color="warning"
title	string	''	浮层标题。	title="提示"
content	string	''	简单纯文本内容；复杂内容请用默认插槽。	content="完整标题"
titleClass	string	''	标题附加类名。	title-class="my-title"
panelClass	string	''	外层面板附加类名。	panel-class="my-panel"
bodyClass	string	''	内容区附加类名。	body-class="my-body"
triggerClass	string	''	触发器包裹层附加类名。	trigger-class="my-trigger"
backdrop	boolean | soft | blur	false	是否显示遮罩以及遮罩样式。	backdrop="blur"
disabled	boolean	false	禁用浮层。	:disabled="true"
motion	scale | fade | slide-up | slide-down | none	scale	过渡预设。	motion="slide-up"
enterFromClass	string	''	自定义进入起始类名。	enter-from-class="..."
enterActiveClass	string	''	自定义进入激活类名。	enter-active-class="..."
leaveToClass	string	''	自定义离开结束类名。	leave-to-class="..."
leaveActiveClass	string	''	自定义离开激活类名。	leave-active-class="..."