使用场景
为 PopperContent 提供指向目标的箭头。
触发器、内容与箭头组合
焦点/悬停控制公开 visible；四个子入口在同一个完整 SFC 中组合。
触发器、内容与箭头组合
vue
<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: 'AsamPopperArrowBasicDemo' });
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>vue
<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: 'AsamPopperArrowBasicDemo' });
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>使用约定
在 AsamPopperContent 的 default 插槽内使用。当前箭头自身没有 Props、Events 或 Slots；arrowOffset 必须传给 PopperContent。arrowRef 是公开元素句柄。不要向箭头透传属性冒充独立能力。
组合职责与生命周期
仅在 AsamPopperContent 内绘制定位箭头。arrowOffset 配置在 AsamPopperContent，Arrow 自身无 Props、Events 或 Slots；arrowRef 为实时元素句柄。位置更新由 PopperContent 管理，不能作为独立 Tooltip 使用。
API
属性 AsamPopperArrowProps
事件 AsamPopperArrowEmits
插槽 AsamPopperArrowSlots
实例方法与状态 AsamPopperArrowExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
arrowRef | 箭头元素。 | HTMLElement | undefined | — |
关联组件
参数与事件补充说明
2.14.7 中 arrowOffset 由 PopperContent 使用，Arrow 本身没有运行时参数。
AsamPopperArrowProps 公开类型视图
ts
import type { AsamPopperArrowProps } from '@asam-ui/ui';
// AsamPopperArrowProps
type PublicContract = {
[key: string]: never;
};AsamPopperArrowEmits 公开类型视图
ts
import type { AsamPopperArrowEmits } from '@asam-ui/ui';
// AsamPopperArrowEmits
type PublicContract = {
[key: string]: never;
};AsamPopperArrowSlots 公开类型视图
ts
import type { AsamPopperArrowSlots } from '@asam-ui/ui';
// AsamPopperArrowSlots
type PublicContract = {
[key: string]: never;
};参数与事件说明
arrowRef
必填：是；声明来源：上游声明。
arrowRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
AsamPopperArrowExpose 公开类型视图
ts
import type { AsamPopperArrowExpose } from '@asam-ui/ui';
// AsamPopperArrowExpose
type PublicContract = {
"arrowRef": HTMLElement | undefined;
};