使用场景
将一个触发元素关联到 Popper 定位上下文。
触发器、内容与箭头组合
焦点/悬停控制公开 visible；四个子入口在同一个完整 SFC 中组合。
触发器、内容与箭头组合
<template>
<AsamPopper role="tooltip">
<AsamPopperTrigger
:on-mouseenter="show"
:on-mouseleave="hide"
:on-focus="show"
:on-blur="hide"
>
<AsamButton type="default" native-type="button">基础定位触发器</AsamButton>
</AsamPopperTrigger>
<AsamPopperContent
v-show="visible"
:visible="visible"
placement="bottom"
:offset="12"
:arrow-offset="6"
:trapping="false"
>
<div class="panel">组合定位内容</div>
<AsamPopperArrow />
</AsamPopperContent>
</AsamPopper>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopperTriggerBasicDemo' });
import { ref } from 'vue';
import {
AsamButton,
AsamPopper,
AsamPopperTrigger,
AsamPopperContent,
AsamPopperArrow
} from '@asam-ui/ui';
const visible = ref(false);
const show = () => {
visible.value = true;
};
const hide = () => {
visible.value = false;
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style><template>
<AsamPopper role="tooltip">
<AsamPopperTrigger
:on-mouseenter="show"
:on-mouseleave="hide"
:on-focus="show"
:on-blur="hide"
>
<AsamButton type="default" native-type="button">基础定位触发器</AsamButton>
</AsamPopperTrigger>
<AsamPopperContent
v-show="visible"
:visible="visible"
placement="bottom"
:offset="12"
:arrow-offset="6"
:trapping="false"
>
<div class="panel">组合定位内容</div>
<AsamPopperArrow />
</AsamPopperContent>
</AsamPopper>
</template>
<script setup>
defineOptions({ name: 'AsamPopperTriggerBasicDemo' });
import { ref } from 'vue';
import {
AsamButton,
AsamPopper,
AsamPopperTrigger,
AsamPopperContent,
AsamPopperArrow
} from '@asam-ui/ui';
const visible = ref(false);
const show = () => {
visible.value = true;
};
const hide = () => {
visible.value = false;
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>使用约定
放在 AsamPopper 内；default 插槽提供单个触发元素。 完整说明。
组合职责与生命周期
消费 AsamPopper 注入并关联触发 DOM。 完整说明。
API
属性 AsamPopperTriggerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
virtualRef | 浮层依附的参考元素。 | (AsamPopperTriggerProps)["virtualRef"] | undefined |
virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | undefined | false |
onMouseenter | — | ((e: MouseEvent) => void) | undefined | undefined |
onMouseleave | — | ((e: MouseEvent) => void) | undefined | undefined |
onClick | — | ((e: PointerEvent) => void) | undefined | undefined |
onKeydown | — | ((e: KeyboardEvent) => void) | undefined | undefined |
onFocus | — | ((e: FocusEvent) => void) | undefined | undefined |
onBlur | — | ((e: FocusEvent) => void) | undefined | undefined |
onContextmenu | — | ((e: PointerEvent) => void) | undefined | undefined |
id | — | string | undefined | undefined |
open | — | boolean | undefined | false |
事件 AsamPopperTriggerEmits
插槽 AsamPopperTriggerSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
实例方法与状态 AsamPopperTriggerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
triggerRef | 触发元素。 | (AsamPopperTriggerExpose)["triggerRef"] | — |
用法与契约补充说明
使用约定
放在 AsamPopper 内；default 插槽提供单个触发元素。onMouseenter/onMouseleave/onFocus/onBlur 等公开 props 是原始交互回调。virtualTriggering/virtualRef 可使用虚拟目标，triggerRef 为公开句柄。显隐状态由宿主或高层组件负责。
组合职责与生命周期
消费 AsamPopper 注入并关联触发 DOM。default 提供单个元素，virtualTriggering/virtualRef 支持虚拟目标；onMouseenter/onMouseleave/onFocus/onBlur/onClick/onContextmenu/onKeydown 接收真实事件。ID、ARIA 与回传触发引用参与无障碍关联。它不自动决定 visible，宿主应同步内容状态。
关联组件
参数与事件补充说明
固定 2.14.7 公开参数；运行时默认值来自已安装组件。
参数与事件说明
virtualRef
必填：否；声明来源：上游声明。
virtualRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
virtualRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
virtualTriggering
必填：否；声明来源：上游声明。
virtualTriggering 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）onMouseenter
必填：否；声明来源：上游声明。
onMouseenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onMouseleave
必填：否；声明来源：上游声明。
onMouseleave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onClick
必填：否；声明来源：上游声明。
onClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onKeydown
必填：否；声明来源：上游声明。
onKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: KeyboardEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onFocus
必填：否；声明来源：上游声明。
onFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onBlur
必填：否；声明来源：上游声明。
onBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onContextmenu
必填：否；声明来源：上游声明。
onContextmenu 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
id
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）open
必填：否；声明来源：上游声明。
open 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）AsamPopperTriggerProps 公开类型视图
import type { AsamPopperTriggerProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopperTriggerProps
type PublicContract = {
"virtualRef"?: (AsamPopperTriggerProps)["virtualRef"];
"virtualTriggering"?: boolean | undefined;
"onMouseenter"?: ((e: MouseEvent) => void) | undefined;
"onMouseleave"?: ((e: MouseEvent) => void) | undefined;
"onClick"?: ((e: PointerEvent) => void) | undefined;
"onKeydown"?: ((e: KeyboardEvent) => void) | undefined;
"onFocus"?: ((e: FocusEvent) => void) | undefined;
"onBlur"?: ((e: FocusEvent) => void) | undefined;
"onContextmenu"?: ((e: PointerEvent) => void) | undefined;
"id"?: string | undefined;
"open"?: boolean | undefined;
};AsamPopperTriggerEmits 公开类型视图
import type { AsamPopperTriggerEmits } from '@asam-ui/ui';
// AsamPopperTriggerEmits
type PublicContract = {
[key: string]: never;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamPopperTriggerSlots 公开类型视图
import type { AsamPopperTriggerSlots } from '@asam-ui/ui';
// AsamPopperTriggerSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
};参数与事件说明
triggerRef
必填：是；声明来源：上游声明。
triggerRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
triggerRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
AsamPopperTriggerExpose 公开类型视图
import type { AsamPopperTriggerExpose, AsamPopperTriggerProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopperTriggerExpose
type PublicContract = {
"triggerRef": (AsamPopperTriggerExpose)["triggerRef"];
};