使用场景 ​
显示 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: 'AsamPopperContentBasicDemo' });
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: 'AsamPopperContentBasicDemo' });
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>
使用约定 ​
通过 visible 控制浮层,位置、边界和挂载方式使用公开属性配置。 完整说明。
组合职责与生命周期 ​
消费同一 AsamPopper 的引用,visible 控制定位状态,v-show 或挂载策略控制实际显示。 完整说明。
API
属性 AsamPopperContentProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
id | — | string | undefined | undefined |
style | — | (AsamPopperContentProps)["style"] | undefined |
className | — | AsamPopperContentProps["className"] | false |
effect | — | enum"light" | "dark"完整类型:(AsamPopperContentProps)["effect"] | "dark" |
visible | — | boolean | undefined | false |
enterable | — | boolean | undefined | true |
pure | — | boolean | undefined | false |
focusOnShow | — | boolean | undefined | false |
trapping | — | boolean | undefined | false |
popperClass | — | AsamPopperContentProps["className"] | undefined |
popperStyle | — | (AsamPopperContentProps)["popperStyle"] | undefined |
referenceEl | — | HTMLElement | undefined | undefined |
triggerTargetEl | — | HTMLElement | undefined | undefined |
stopPopperMouseEvent | — | boolean | undefined | true |
virtualTriggering | — | boolean | undefined | false |
zIndex | — | number | undefined | undefined |
ariaLabel | — | string | undefined | undefined |
loop | — | boolean | undefined | false |
boundariesPadding | 浮层与边界之间的最小间距。 | number | undefined | 0 |
fallbackPlacements | 首选位置不可用时的备选位置。 | (AsamPopperContentProps)["fallbackPlacements"] | undefined |
gpuAcceleration | 是否使用 GPU 加速定位。 | boolean | undefined | true |
offset | Tooltip 出现位置的偏移量 | number | undefined | 12 |
placement | Tooltip 组件出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型:(AsamPopperContentProps)["placement"] | "bottom" |
popperOptions | Popper 配置参数。 | (AsamPopperContentProps)["popperOptions"] | 工厂函数(每个实例创建) |
strategy | 浮层的 CSS 定位策略。 | enum"fixed" | "absolute"完整类型:"fixed" | "absolute" | undefined | "absolute" |
arrowOffset | 箭头偏移量。 | number | undefined | 5 |
事件 AsamPopperContentEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mouseenter | — | [event: MouseEvent] | — |
mouseleave | — | [event: MouseEvent] | — |
focus | — | (AsamPopperContentEmits)["focus"] | — |
blur | — | (AsamPopperContentEmits)["blur"] | — |
close | — | (AsamPopperContentEmits)["close"] | — |
插槽 AsamPopperContentSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
实例方法与状态 AsamPopperContentExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
popperInstanceRef | Popper 实例。 | (AsamPopperContentExpose)["popperInstanceRef"] | — |
popperContentRef | 浮层内容元素。 | HTMLElement | undefined | — |
updatePopper | 更新浮层的方法。 | (shouldUpdateZIndex?: boolean) => void | — |
contentStyle | 内容样式。 | (AsamPopperContentExpose)["contentStyle"] | — |
用法与契约补充说明 ​
组合职责与生命周期 ​
消费同一 AsamPopper 的引用,visible 控制定位状态,v-show 或挂载策略控制实际显示。placement/offset/strategy/popperOptions/boundariesPadding/gpuAcceleration 控制定位;trapping/focusOnShow/loop 管理内容焦点,mouseenter/mouseleave/focus/blur/close 保留事件。公开 popperContentRef/popperInstanceRef/updatePopper/contentStyle 为实时句柄,初始隐藏或重新挂载后需重新读取。
更多参数与事件说明 ​
使用约定 ​
visible 控制显示,placement、offset、arrowOffset、boundariesPadding、fallbackPlacements、strategy、zIndex 和 popperOptions 决定定位。focus/blur/close、指针事件通知宿主。updatePopper 更新位置,contentStyle、popperContentRef 与 popperInstanceRef 是公开句柄。它没有四档控件 size。
关联组件
参数与事件补充说明
固定 2.14.7 公开参数;运行时默认值来自已安装组件。
参数与事件说明
id
必填:否;声明来源:上游声明。
默认值与来源
undefined(已安装运行时;已安装组件)style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
className
必填:否;声明来源:上游声明。
className 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
默认值与来源
false(已安装运行时;已安装组件)固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
effect
必填:否;声明来源:上游声明。
effect 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"light" / "dark"
默认值与来源
"dark"(已安装运行时;已安装组件)固定上游源码默认表达式:'dark'(2.14.7;源码事实,未作为 ASAM 运行实测)
visible
必填:否;声明来源:上游声明。
visible 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)enterable
必填:否;声明来源:上游声明。
enterable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(已安装运行时;已安装组件)固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
pure
必填:否;声明来源:上游声明。
pure 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)focusOnShow
必填:否;声明来源:上游声明。
focusOnShow 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)trapping
必填:否;声明来源:上游声明。
trapping 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)popperClass
必填:否;声明来源:上游声明。
popperClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
popperStyle
必填:否;声明来源:上游声明。
popperStyle 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
referenceEl
必填:否;声明来源:上游声明。
referenceEl 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
triggerTargetEl
必填:否;声明来源:上游声明。
triggerTargetEl 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
stopPopperMouseEvent
必填:否;声明来源:上游声明。
stopPopperMouseEvent 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(已安装运行时;已安装组件)固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
virtualTriggering
必填:否;声明来源:上游声明。
virtualTriggering 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)zIndex
必填:否;声明来源:上游声明。
默认值与来源
undefined(已安装运行时;已安装组件)ariaLabel
必填:否;声明来源:上游声明。
默认值与来源
undefined(已安装运行时;已安装组件)loop
必填:否;声明来源:上游声明。
loop 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)boundariesPadding
必填:否;声明来源:上游声明。
默认值与来源
0(已安装运行时;已安装组件)固定上游源码默认表达式:0(2.14.7;源码事实,未作为 ASAM 运行实测)
fallbackPlacements
必填:否;声明来源:上游声明。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
gpuAcceleration
必填:否;声明来源:上游声明。
gpuAcceleration 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(已安装运行时;已安装组件)固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
offset
必填:否;声明来源:上游声明。
默认值与来源
12(已安装运行时;已安装组件)固定上游源码默认表达式:12(2.14.7;源码事实,未作为 ASAM 运行实测)
placement
必填:否;声明来源:上游声明。
placement 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"bottom"(已安装运行时;已安装组件)固定上游源码默认表达式:'bottom'(2.14.7;源码事实,未作为 ASAM 运行实测)
popperOptions
必填:否;声明来源:上游声明。
popperOptions 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:AsamPopperContentProps["placement"]— 依赖声明枚举:
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamPopperContentProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamPopperContentProps)["popperOptions"]>, "strategy">— 依赖声明枚举:
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamPopperContentProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数:
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamPopperContentProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
工厂函数(每个实例创建)(实例工厂;已安装组件)固定上游源码工厂(未执行):() => ({})(2.14.7;源码事实,未作为 ASAM 运行实测)
strategy
必填:否;声明来源:上游声明。
strategy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"fixed" / "absolute"
默认值与来源
"absolute"(已安装运行时;已安装组件)固定上游源码默认表达式:'absolute'(2.14.7;源码事实,未作为 ASAM 运行实测)
arrowOffset
必填:否;声明来源:上游声明。
默认值与来源
5(已安装运行时;已安装组件)固定上游源码默认表达式:5(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamPopperContentProps 公开类型视图
import type { AsamPopperContentProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopperContentProps
type PublicContract = {
"id"?: string | undefined;
"style"?: (AsamPopperContentProps)["style"];
"className"?: AsamPopperContentProps["className"];
"effect"?: (AsamPopperContentProps)["effect"];
"visible"?: boolean | undefined;
"enterable"?: boolean | undefined;
"pure"?: boolean | undefined;
"focusOnShow"?: boolean | undefined;
"trapping"?: boolean | undefined;
"popperClass"?: AsamPopperContentProps["className"];
"popperStyle"?: (AsamPopperContentProps)["popperStyle"];
"referenceEl"?: HTMLElement | undefined;
"triggerTargetEl"?: HTMLElement | undefined;
"stopPopperMouseEvent"?: boolean | undefined;
"virtualTriggering"?: boolean | undefined;
"zIndex"?: number | undefined;
"ariaLabel"?: string | undefined;
"loop"?: boolean | undefined;
"boundariesPadding"?: number | undefined;
"fallbackPlacements"?: (AsamPopperContentProps)["fallbackPlacements"];
"gpuAcceleration"?: boolean | undefined;
"offset"?: number | undefined;
"placement"?: (AsamPopperContentProps)["placement"];
"popperOptions"?: (AsamPopperContentProps)["popperOptions"];
"strategy"?: "fixed" | "absolute" | undefined;
"arrowOffset"?: number | undefined;
};
参数与事件说明
mouseenter
必填:是;声明来源:ASAM 声明。
mouseleave
必填:是;声明来源:ASAM 声明。
focus
必填:是;声明来源:ASAM 声明。
blur
必填:是;声明来源:ASAM 声明。
close
必填:是;声明来源:ASAM 声明。
AsamPopperContentEmits 公开类型视图
import type { AsamPopperContentEmits } from '@asam-ui/ui';
// AsamPopperContentEmits
type PublicContract = {
"mouseenter": [event: MouseEvent];
"mouseleave": [event: MouseEvent];
"focus": (AsamPopperContentEmits)["focus"];
"blur": (AsamPopperContentEmits)["blur"];
"close": (AsamPopperContentEmits)["close"];
};
参数与事件说明
default
必填:否;声明来源:ASAM 声明。
default 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
AsamPopperContentSlots 公开类型视图
import type { AsamPopperContentSlots } from '@asam-ui/ui';
// AsamPopperContentSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
};
参数与事件说明
popperInstanceRef
必填:是;声明来源:上游声明。
popperInstanceRef 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
popperInstanceRef.state:PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">— 依赖声明popperInstanceRef.state.elements:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["elements"]— 依赖声明popperInstanceRef.state.elements.reference:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["elements"]>)["reference"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.elements.popper:HTMLElement— 依赖声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
popperInstanceRef.state.elements.arrow:HTMLElement | undefined— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.options:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["options"]— 依赖声明popperInstanceRef.state.options.placement:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["options"]>)["placement"]— 依赖声明枚举:
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.options.modifiers:any[]— 依赖声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
popperInstanceRef.state.options.strategy:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["options"]>)["strategy"]— 依赖声明枚举:
"fixed"/"absolute"嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.options.onFirstUpdate:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["options"]>)["onFirstUpdate"]— 依赖声明事件参数:
(arg0: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["options"]>)["onFirstUpdate"]>, (...args: never[]) => unknown>>[0]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.placement:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["placement"]— 依赖声明枚举:
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperInstanceRef.state.strategy:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["strategy"]— 依赖声明枚举:
"fixed"/"absolute"popperInstanceRef.state.orderedModifiers:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["orderedModifiers"]— 依赖声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
popperInstanceRef.state.rects:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["rects"]— 依赖声明popperInstanceRef.state.rects.reference:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["rects"]>)["reference"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.rects.popper:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["rects"]>)["popper"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.scrollParents:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["scrollParents"]— 依赖声明popperInstanceRef.state.scrollParents.reference:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["scrollParents"]>)["reference"]— 依赖声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
popperInstanceRef.state.scrollParents.popper:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["scrollParents"]>)["popper"]— 依赖声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
popperInstanceRef.state.styles:{ [key: string]: Partial<CSSStyleDeclaration>; }— 依赖声明popperInstanceRef.state.attributes:{ [key: string]: { [key: string]: string | boolean; }; }— 依赖声明popperInstanceRef.state.modifiersData:(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["modifiersData"]— 依赖声明popperInstanceRef.state.modifiersData.arrow:{ x?: number; y?: number; centerOffset: number; } | undefined— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.modifiersData.hide:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["modifiersData"]>)["hide"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.modifiersData.offset:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["modifiersData"]>)["offset"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.modifiersData.preventOverflow:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["modifiersData"]>)["preventOverflow"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.modifiersData.popperOffsets:(NonNullable<(NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "state">>)["modifiersData"]>)["popperOffsets"]— 依赖声明嵌套展开边界:深度上限;完整类型见公开类型视图。
popperInstanceRef.state.reset:boolean— 依赖声明枚举:
false/true
popperInstanceRef.destroy:() => void— 依赖声明事件参数:
(): voidpopperInstanceRef.forceUpdate:() => void— 依赖声明事件参数:
(): voidpopperInstanceRef.update:PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "update">— 依赖声明事件参数:
(): ReturnType<Extract<NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "update">>, (...args: never[]) => unknown>>popperInstanceRef.setOptions:PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "setOptions">— 依赖声明事件参数:
(setOptionsAction: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "setOptions">>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<PublicMember<NonNullable<(AsamPopperContentExpose)["popperInstanceRef"]>, "setOptions">>, (...args: never[]) => unknown>>
popperContentRef
必填:是;声明来源:上游声明。
popperContentRef 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
updatePopper
必填:是;声明来源:上游声明。
updatePopper 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(shouldUpdateZIndex?: boolean | undefined): void
contentStyle
必填:是;声明来源:上游声明。
contentStyle 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
AsamPopperContentExpose 公开类型视图
import type { AsamPopperContentExpose, AsamPopperContentProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopperContentExpose
type PublicContract = {
"popperInstanceRef": (AsamPopperContentExpose)["popperInstanceRef"];
"popperContentRef": HTMLElement | undefined;
"updatePopper": (shouldUpdateZIndex?: boolean) => void;
"contentStyle": (AsamPopperContentExpose)["contentStyle"];
};