使用场景
在触发元素附近展示补充信息和少量操作。
面板操作后关闭
操作按钮通过插槽公开的 hide 关闭面板。
面板操作后关闭
<template>
<AsamPopover title="草稿操作" :width="240" trigger="click">
<template #reference>
<AsamButton type="default" native-type="button">打开气泡面板</AsamButton>
</template>
<template #default="{ hide }">
<p class="example-paragraph">需要确认的补充信息。</p>
<AsamButton
type="default"
native-type="button"
@click="
count++;
hide();
"
>
完成并关闭
</AsamButton>
</template>
</AsamPopover>
<p class="example-paragraph" role="status">完成 {{ count }} 次</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopoverBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopover } from '@asam-ui/ui';
const count = ref(0);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamPopover title="草稿操作" :width="240" trigger="click">
<template #reference>
<AsamButton type="default" native-type="button">打开气泡面板</AsamButton>
</template>
<template #default="{ hide }">
<p class="example-paragraph">需要确认的补充信息。</p>
<AsamButton
type="default"
native-type="button"
@click="
count++;
hide();
"
>
完成并关闭
</AsamButton>
</template>
</AsamPopover>
<p class="example-paragraph" role="status">完成 {{ count }} 次</p>
</template>
<script setup>
defineOptions({ name: 'AsamPopoverBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopover } from '@asam-ui/ui';
const count = ref(0);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>受控显隐与禁用
宿主同时管理可见状态和禁用开关。
受控显隐与禁用
<template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换面板</AsamButton
>
<AsamCheckboxItem v-model="disabled"> 禁用触发</AsamCheckboxItem>
<AsamPopover
v-model:visible="visible"
:disabled="disabled"
title="受控面板"
content="显隐由状态驱动"
trigger="click"
>
<template #reference>
<AsamButton type="default" native-type="button">面板锚点</AsamButton>
</template>
</AsamPopover>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopoverControlledDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';
const visible = ref(false);
const disabled = ref(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><template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换面板</AsamButton
>
<AsamCheckboxItem v-model="disabled"> 禁用触发</AsamCheckboxItem>
<AsamPopover
v-model:visible="visible"
:disabled="disabled"
title="受控面板"
content="显隐由状态驱动"
trigger="click"
>
<template #reference>
<AsamButton type="default" native-type="button">面板锚点</AsamButton>
</template>
</AsamPopover>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPopoverControlledDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';
const visible = ref(false);
const disabled = ref(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>数组组合触发
trigger 接受单个 hover/click/focus/contextmenu，也接受这些值组成的数组。 完整说明。
数组组合触发
<template>
<AsamCheckboxGroup v-model="triggers">
<AsamCheckboxItem value="hover">悬停</AsamCheckboxItem>
<AsamCheckboxItem value="click">点击</AsamCheckboxItem>
</AsamCheckboxGroup>
<p class="example-paragraph" role="status">数组触发：{{ triggers.join(' + ') || '无' }}</p>
<AsamPopover :trigger="triggers" title="数组触发" :hide-after="0">
<template #reference>
<AsamButton type="default" native-type="button">数组触发锚点</AsamButton>
</template>
<p class="example-paragraph">同一面板按所选数组响应触发。</p>
</AsamPopover>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopoverTriggerArrayDemo' });
import { ref } from 'vue';
import { AsamCheckboxGroup, AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';
import type { AsamPopoverTrigger } from '@asam-ui/ui';
const triggers = ref<Extract<AsamPopoverTrigger, string[]>>(['hover', 'click']);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamCheckboxGroup v-model="triggers">
<AsamCheckboxItem value="hover">悬停</AsamCheckboxItem>
<AsamCheckboxItem value="click">点击</AsamCheckboxItem>
</AsamCheckboxGroup>
<p class="example-paragraph" role="status">数组触发：{{ triggers.join(' + ') || '无' }}</p>
<AsamPopover :trigger="triggers" title="数组触发" :hide-after="0">
<template #reference>
<AsamButton type="default" native-type="button">数组触发锚点</AsamButton>
</template>
<p class="example-paragraph">同一面板按所选数组响应触发。</p>
</AsamPopover>
</template>
<script setup>
defineOptions({ name: 'AsamPopoverTriggerArrayDemo' });
import { ref } from 'vue';
import { AsamCheckboxGroup, AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';
const triggers = ref(['hover', 'click']);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
默认触发为 hover；需要点击时显式设置 trigger="click"。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
定位方向
定位方向
<template>
<div class="popover-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamPopover
trigger="hover"
title="标题"
content="顶部左侧提示信息"
placement="top-start"
>
<template #reference>
<AsamButton type="default">顶部左侧</AsamButton>
</template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="顶部居中提示信息" placement="top">
<template #reference>
<AsamButton type="default">顶部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="顶部右侧提示信息"
placement="top-end"
>
<template #reference>
<AsamButton type="default">顶部右侧</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-3">
<AsamPopover
trigger="hover"
title="标题"
content="左侧顶部提示信息"
placement="left-start"
>
<template #reference>
<AsamButton type="default">左侧顶部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="右侧顶部提示信息"
placement="right-start"
>
<template #reference>
<AsamButton type="default">右侧顶部</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-4">
<AsamPopover trigger="hover" title="标题" content="左侧居中提示信息" placement="left">
<template #reference>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="右侧居中提示信息" placement="right">
<template #reference>
<AsamButton type="default">右侧</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-5">
<AsamPopover
trigger="hover"
title="标题"
content="左侧底部提示信息"
placement="left-end"
>
<template #reference>
<AsamButton type="default">左侧底部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="右侧底部提示信息"
placement="right-end"
>
<template #reference>
<AsamButton type="default">右侧底部</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row center demo-layout-6">
<AsamPopover
trigger="hover"
title="标题"
content="底部左侧提示信息"
placement="bottom-start"
>
<template #reference> <AsamButton type="default">底部左侧</AsamButton></template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="底部居中提示信息" placement="bottom">
<template #reference> <AsamButton type="default">底部</AsamButton></template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="底部右侧提示信息"
placement="bottom-end"
>
<template #reference>
<AsamButton type="default">底部右侧</AsamButton>
</template>
</AsamPopover>
</div>
</div>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
</script>
<style>
.popover-base-box {
width: 600px;
}
.popover-base-box .row {
display: flex;
align-items: center;
justify-content: space-between;
}
.popover-base-box .center {
justify-content: center;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style><template>
<div class="popover-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamPopover
trigger="hover"
title="标题"
content="顶部左侧提示信息"
placement="top-start"
>
<template #reference>
<AsamButton type="default">顶部左侧</AsamButton>
</template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="顶部居中提示信息" placement="top">
<template #reference>
<AsamButton type="default">顶部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="顶部右侧提示信息"
placement="top-end"
>
<template #reference>
<AsamButton type="default">顶部右侧</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-3">
<AsamPopover
trigger="hover"
title="标题"
content="左侧顶部提示信息"
placement="left-start"
>
<template #reference>
<AsamButton type="default">左侧顶部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="右侧顶部提示信息"
placement="right-start"
>
<template #reference>
<AsamButton type="default">右侧顶部</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-4">
<AsamPopover trigger="hover" title="标题" content="左侧居中提示信息" placement="left">
<template #reference>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="右侧居中提示信息" placement="right">
<template #reference>
<AsamButton type="default">右侧</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row demo-layout-5">
<AsamPopover
trigger="hover"
title="标题"
content="左侧底部提示信息"
placement="left-end"
>
<template #reference>
<AsamButton type="default">左侧底部</AsamButton>
</template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="右侧底部提示信息"
placement="right-end"
>
<template #reference>
<AsamButton type="default">右侧底部</AsamButton>
</template>
</AsamPopover>
</div>
<div class="row center demo-layout-6">
<AsamPopover
trigger="hover"
title="标题"
content="底部左侧提示信息"
placement="bottom-start"
>
<template #reference> <AsamButton type="default">底部左侧</AsamButton></template>
</AsamPopover>
<AsamPopover trigger="hover" title="标题" content="底部居中提示信息" placement="bottom">
<template #reference> <AsamButton type="default">底部</AsamButton></template>
</AsamPopover>
<AsamPopover
trigger="hover"
title="标题"
content="底部右侧提示信息"
placement="bottom-end"
>
<template #reference>
<AsamButton type="default">底部右侧</AsamButton>
</template>
</AsamPopover>
</div>
</div>
</template>
<script setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
</script>
<style>
.popover-base-box {
width: 600px;
}
.popover-base-box .row {
display: flex;
align-items: center;
justify-content: space-between;
}
.popover-base-box .center {
justify-content: center;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style>显隐与关闭守卫
显隐与关闭守卫
<template>
<AsamPopover
placement="top-start"
title="标题"
:width="200"
trigger="hover"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">悬停触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
placement="bottom"
title="标题"
:width="200"
trigger="click"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">点击触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
ref="popover"
placement="right"
title="标题"
:width="200"
trigger="focus"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">聚焦触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
ref="popover"
title="标题"
:width="200"
trigger="contextmenu"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">右键触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
:visible="visible"
placement="bottom"
title="标题"
:width="200"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2" @click="visible = !visible">
手动触发
</AsamButton>
</template>
</AsamPopover>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.el-button + .el-button {
margin-left: 8px;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.m-2 {
margin: var(--asam-space-sm);
}
</style><template>
<AsamPopover
placement="top-start"
title="标题"
:width="200"
trigger="hover"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">悬停触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
placement="bottom"
title="标题"
:width="200"
trigger="click"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">点击触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
ref="popover"
placement="right"
title="标题"
:width="200"
trigger="focus"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">聚焦触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
ref="popover"
title="标题"
:width="200"
trigger="contextmenu"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2">右键触发</AsamButton>
</template>
</AsamPopover>
<AsamPopover
:visible="visible"
placement="bottom"
title="标题"
:width="200"
content="这是气泡内容，这是气泡内容，这是气泡内容"
>
<template #reference>
<AsamButton type="default" class="m-2" @click="visible = !visible">
手动触发
</AsamButton>
</template>
</AsamPopover>
</template>
<script setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.el-button + .el-button {
margin-left: 8px;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.m-2 {
margin: var(--asam-space-sm);
}
</style>完整交互：virtual-triggering
完整交互：virtual-triggering
<template>
<AsamButton type="default" ref="buttonRef" v-asam-click-outside="onClickOutside">
点击按钮
</AsamButton>
<AsamPopover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
title="带标题"
virtual-triggering
>
<span> 示例内容 </span>
</AsamPopover>
</template>
<script lang="ts" setup>
import {
AsamButton,
AsamClickOutside as vAsamClickOutside,
AsamPopover,
type AsamPopoverExpose as PopoverInstance
} from '@asam-ui/ui';
import { ref } from 'vue';
const buttonRef = ref();
const popoverRef = ref<PopoverInstance>();
const onClickOutside = () => {
popoverRef.value?.hide();
};
</script><template>
<AsamButton type="default" ref="buttonRef" v-asam-click-outside="onClickOutside">
点击按钮
</AsamButton>
<AsamPopover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
title="带标题"
virtual-triggering
>
<span> 示例内容 </span>
</AsamPopover>
</template>
<script setup>
import { AsamButton, AsamClickOutside as vAsamClickOutside, AsamPopover } from '@asam-ui/ui';
import { ref } from 'vue';
const buttonRef = ref();
const popoverRef = ref();
const onClickOutside = () => {
popoverRef.value?.hide();
};
</script>完整交互：nested-information
完整交互：nested-information
<template>
<div style="display: flex; align-items: center">
<AsamPopover placement="right" :width="400" trigger="click">
<template #reference>
<AsamButton type="default" style="margin-right: 16px">点击触发</AsamButton>
</template>
<AsamTable :data="gridData">
<AsamTableColumn width="150" property="date" label="日期" />
<AsamTableColumn width="100" property="name" label="姓名" />
<AsamTableColumn width="300" property="address" label="地址" />
</AsamTable>
</AsamPopover>
<AsamPopover
trigger="hover"
:width="300"
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
>
<template #reference>
<AsamAvatar
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E"
/>
</template>
<template #default>
<div
class="demo-rich-conent"
style="display: flex; gap: 16px; flex-direction: column"
>
<AsamAvatar
:size="60"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E"
style="margin-bottom: 8px"
/>
<div>
<p class="demo-rich-content__name example-paragraph" style="margin: 0; font-weight: 500">
ASAM UI
</p>
<p
class="demo-rich-content__mention example-paragraph"
style="margin: 0; font-size: 14px; color: var(--el-color-info)"
>
@asam-ui
</p>
</div>
<p class="demo-rich-content__desc example-paragraph" style="margin: 0">
ASAM UI，面向开发者、设计师与产品经理的 Vue 3 组件库
</p>
</div>
</template>
</AsamPopover>
</div>
</template>
<script lang="ts" setup>
import { AsamAvatar, AsamButton, AsamPopover, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const gridData = [
{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}
];
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div style="display: flex; align-items: center">
<AsamPopover placement="right" :width="400" trigger="click">
<template #reference>
<AsamButton type="default" style="margin-right: 16px">点击触发</AsamButton>
</template>
<AsamTable :data="gridData">
<AsamTableColumn width="150" property="date" label="日期" />
<AsamTableColumn width="100" property="name" label="姓名" />
<AsamTableColumn width="300" property="address" label="地址" />
</AsamTable>
</AsamPopover>
<AsamPopover
trigger="hover"
:width="300"
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
>
<template #reference>
<AsamAvatar
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E"
/>
</template>
<template #default>
<div
class="demo-rich-conent"
style="display: flex; gap: 16px; flex-direction: column"
>
<AsamAvatar
:size="60"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E"
style="margin-bottom: 8px"
/>
<div>
<p class="demo-rich-content__name example-paragraph" style="margin: 0; font-weight: 500">
ASAM UI
</p>
<p
class="demo-rich-content__mention example-paragraph"
style="margin: 0; font-size: 14px; color: var(--el-color-info)"
>
@asam-ui
</p>
</div>
<p class="demo-rich-content__desc example-paragraph" style="margin: 0">
ASAM UI，面向开发者、设计师与产品经理的 Vue 3 组件库
</p>
</div>
</template>
</AsamPopover>
</div>
</template>
<script setup>
import { AsamAvatar, AsamButton, AsamPopover, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const gridData = [
{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}
];
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>完整交互：nested-operation
完整交互：nested-operation
<template>
<AsamPopover :visible="visible" placement="top" :width="180">
<div class="demo-slot-layout">
<p class="example-paragraph">确定删除此项吗？</p>
<div style="text-align: right; margin: 0">
<AsamButton type="default" size="small" text @click="visible = false"
>取消</AsamButton
>
<AsamButton size="small" type="default" @click="visible = false"> 确认 </AsamButton>
</div>
</div>
<template #reference>
<AsamButton type="default" @click="visible = true">删除</AsamButton>
</template>
</AsamPopover>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.demo-slot-layout {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button {
justify-self: start;
}
.demo-slot-layout > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button {
margin-left: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamPopover :visible="visible" placement="top" :width="180">
<div class="demo-slot-layout">
<p class="example-paragraph">确定删除此项吗？</p>
<div style="text-align: right; margin: 0">
<AsamButton type="default" size="small" text @click="visible = false"
>取消</AsamButton
>
<AsamButton size="small" type="default" @click="visible = false"> 确认 </AsamButton>
</div>
</div>
<template #reference>
<AsamButton type="default" @click="visible = true">删除</AsamButton>
</template>
</AsamPopover>
</template>
<script setup>
import { AsamButton, AsamPopover } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.demo-slot-layout {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button {
justify-self: start;
}
.demo-slot-layout > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button {
margin-left: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>完整交互：directive-usage
完整交互：directive-usage
<template>
<AsamButton type="default" v-asam-popover="popoverRef" v-asam-click-outside="onClickOutside">
点击按钮
</AsamButton>
<AsamPopover ref="popoverRef" trigger="click" title="带标题" virtual-triggering persistent>
<span> 示例内容 </span>
</AsamPopover>
</template>
<script lang="ts" setup>
import {
AsamButton,
AsamClickOutside as vAsamClickOutside,
AsamPopover,
AsamPopoverDirective as vAsamPopover,
type AsamPopoverExpose as PopoverInstance
} from '@asam-ui/ui';
import { ref } from 'vue';
const popoverRef = ref<PopoverInstance>();
const onClickOutside = () => {
popoverRef.value?.hide();
};
</script><template>
<AsamButton type="default" v-asam-popover="popoverRef" v-asam-click-outside="onClickOutside">
点击按钮
</AsamButton>
<AsamPopover ref="popoverRef" trigger="click" title="带标题" virtual-triggering persistent>
<span> 示例内容 </span>
</AsamPopover>
</template>
<script setup>
import {
AsamButton,
AsamClickOutside as vAsamClickOutside,
AsamPopover,
AsamPopoverDirective as vAsamPopover
} from '@asam-ui/ui';
import { ref } from 'vue';
const popoverRef = ref();
const onClickOutside = () => {
popoverRef.value?.hide();
};
</script>组合职责与生命周期
reference 或 virtualRef 提供触发目标，default 提供复杂内容，content 用于简单文字。 完整说明。
官方示例默认值适配
AsamPopover 的默认 trigger 为原生 hover；需要点击时显式设置 trigger="click"。悬停分支须显式设置 trigger="hover"；点击、焦点和右键分支分别使用 click、focus、contextmenu。受控 visible 分支由自己的状态和操作按钮决定显隐。
原生事件与插槽
仅转发 update:visible、before-enter、before-leave、after-enter、after-leave，保留每次原生发射及其顺序。 完整说明。
参数省略时的默认值
stopPopperMouseEvent、showArrow、enterable、teleported、persistent 省略时均由原生组件采用 true。显式提供 false、undefined 或后续移除参数仍按原生契约透传；API 表的默认值描述省略参数，不是包装层的内部布尔转换结果。
局部与全局挂载
切换公开挂载参数后，再打开浮层观察内容位于当前组件附近或挂载到 body。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPopover title="草稿操作" :width="240" trigger="click" :teleported="globalPopup">
<template #reference>
<AsamButton type="default" native-type="button">打开气泡面板</AsamButton>
</template>
<template #default="{ hide }">
<p class="example-paragraph">需要确认的补充信息。</p>
<AsamButton
type="default"
native-type="button"
@click="
count++;
hide();
"
>
完成并关闭
</AsamButton>
</template>
</AsamPopover>
<p class="example-paragraph" role="status">完成 {{ count }} 次</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopoverBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopover } from '@asam-ui/ui';
const count = ref(0);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPopover title="草稿操作" :width="240" trigger="click" :teleported="globalPopup">
<template #reference>
<AsamButton type="default" native-type="button">打开气泡面板</AsamButton>
</template>
<template #default="{ hide }">
<p class="example-paragraph">需要确认的补充信息。</p>
<AsamButton
type="default"
native-type="button"
@click="
count++;
hide();
"
>
完成并关闭
</AsamButton>
</template>
</AsamPopover>
<p class="example-paragraph" role="status">完成 {{ count }} 次</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPopoverBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopover } from '@asam-ui/ui';
const count = ref(0);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamPopoverProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
role | 浮层的 ARIA 角色。 | enum"group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree"完整类型："group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined | — |
boundariesPadding | 浮层与边界之间的最小间距。 | number | undefined | — |
fallbackPlacements | 首选位置不可用时的备选位置。 | (AsamPopoverProps)["fallbackPlacements"] | — |
gpuAcceleration | 是否使用 GPU 加速定位。 | boolean | undefined | false |
strategy | 浮层的 CSS 定位策略。 | enum"fixed" | "absolute"完整类型："fixed" | "absolute" | undefined | — |
arrowOffset | 箭头与浮层边缘的最小间距。 | number | undefined | — |
id | — | string | undefined | — |
style | — | import("vue").StyleValue | false |
className | — | AsamPopoverProps["className"] | false |
pure | — | boolean | undefined | false |
focusOnShow | — | boolean | undefined | false |
trapping | — | boolean | undefined | false |
referenceEl | — | HTMLElement | undefined | — |
triggerTargetEl | — | HTMLElement | undefined | — |
stopPopperMouseEvent | 省略时采用透传的原生默认值。 | boolean | undefined | true |
virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | undefined | false |
ariaLabel | — | string | undefined | — |
loop | — | boolean | undefined | false |
rawContent | — | boolean | undefined | false |
virtualRef | 代表 tooltip 所要附加的参照元素 | (AsamPopoverProps)["virtualRef"] | — |
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 | — |
open | — | boolean | undefined | false |
focusOnTarget | — | boolean | undefined | false |
visible | 受控模式下设置可见状态；省略时由触发器管理。 | boolean | null | undefined | false |
trigger | popover 触发方式，在受控模式下无效。 | enum"hover" | "focus" | "click" | "contextmenu"完整类型：AsamPopoverTrigger | undefined | — |
placement | 出现位置 | 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"完整类型：(AsamPopoverProps)["placement"] | — |
disabled | Popover 是否可用 | boolean | undefined | false |
title | 标题 | string | undefined | — |
content | 显示的内容，也可以通过写入默认 slot 修改显示内容 | string | undefined | — |
width | 宽度 | string | number | undefined | — |
offset | 浮层偏移量, Popover 是在 Tooltip,基础上开发的， Popover的 offset 是 undefined, 但Tooltip 的 offset 是12 | number | undefined | — |
showArrow | 省略时采用透传的原生默认值。 | boolean | undefined | true |
enterable | 省略时采用透传的原生默认值。 | boolean | undefined | true |
teleported | 省略时采用透传的原生默认值。 | boolean | undefined | true |
appendTo | which element the popover CONTENT appends to | string | HTMLElement | undefined | — |
showAfter | 延迟显示时间（以毫秒为单位），在受控模式下无效。 | number | undefined | — |
hideAfter | 消失延迟时间（以毫秒为单位），在受控模式下无效。 | number | undefined | — |
autoClose | 隐藏提示框的超时时间（以毫秒为单位），在受控模式下无效。 | number | undefined | — |
persistent | 省略时采用透传的原生默认值。 | boolean | undefined | true |
zIndex | Passed through to 基础控件 popper layering. | number | undefined | — |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamPopoverProps)["effect"] | — |
popperClass | 为 popper 添加类名 | AsamPopoverProps["className"] | false |
popperStyle | 为 popper 自定义样式 | (AsamPopoverProps)["popperStyle"] | false |
popperOptions | Popper 配置参数。 | (AsamPopoverProps)["popperOptions"] | — |
onUpdate:visible | — | ((value: boolean) => void) | undefined | — |
transition | 动画名称 | string | undefined | — |
triggerKeys | 当通过鼠标点击使触发元素获得焦点时，可以定义一组键盘按键代码，通过键盘控制提示框的显示，在受控模式下无效。 | string[] | undefined | — |
tabindex | 气泡面板的原生 tabindex。 | string | number | undefined | — |
事件 AsamPopoverEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:visible | — | [visible: boolean] | — |
before-enter | — | (AsamPopoverEmits)["before-enter"] | — |
before-leave | — | (AsamPopoverEmits)["before-leave"] | — |
after-enter | — | (AsamPopoverEmits)["after-enter"] | — |
after-leave | — | (AsamPopoverEmits)["after-leave"] | — |
插槽 AsamPopoverSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
reference | — | (() => unknown) | undefined | — |
default | — | ((props: { hide: () => void; }) => unknown) | undefined | — |
实例方法与状态 AsamPopoverExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
popperRef | 浮层实例引用。 | (AsamPopoverExpose)["popperRef"] | — |
hide | — | () => void | — |
类型 AsamPopoverTrigger
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
length | 获取或设置数组长度，等于最高索引加一。 | number | — |
toString | 返回数组的字符串表示。 | () => string | undefined |
toLocaleString | 通过各元素的 toLocaleString 方法返回数组的本地化字符串。 | (AsamPopoverTrigger)["toLocaleString"] | undefined |
pop | 移除并返回最后一个元素；空数组返回 undefined 且不修改数组。 | PublicMember<AsamPopoverTrigger, "pop"> | — |
push | 在末尾追加元素并返回新的数组长度。 | PublicMember<AsamPopoverTrigger, "push"> | — |
concat | 合并数组，返回新数组而不修改原数组。 | (AsamPopoverTrigger)["concat"] | — |
join | 以指定分隔符连接所有数组元素。 | (separator?: string) => string | — |
reverse | 原地反转数组，并返回同一数组引用。 | PublicMember<AsamPopoverTrigger, "reverse"> | — |
shift | 移除并返回首个元素；空数组返回 undefined 且不修改数组。 | PublicMember<AsamPopoverTrigger, "shift"> | — |
slice | 返回数组区间的副本；起止位置支持负索引，例如 -2 表示倒数第二项。 | (AsamPopoverTrigger)["slice"] | — |
sort | 原地排序数组，并返回同一数组引用。 | PublicMember<AsamPopoverTrigger, "sort"> | — |
splice | 删除并可插入元素，返回被删除的元素。 | PublicMember<AsamPopoverTrigger, "splice"> | — |
unshift | 在开头插入元素并返回新长度。 | PublicMember<AsamPopoverTrigger, "unshift"> | — |
indexOf | 返回值首次出现的索引，不存在时返回 -1。 | (AsamPopoverTrigger)["indexOf"] | — |
lastIndexOf | 返回值最后出现的索引，不存在时返回 -1。 | (AsamPopoverTrigger)["lastIndexOf"] | — |
every | 判断全部元素是否满足指定条件。 | PublicMember<AsamPopoverTrigger, "every"> | — |
some | 判断是否至少有一个元素满足指定条件。 | PublicMember<AsamPopoverTrigger, "some"> | — |
forEach | 对各元素执行指定操作。 | PublicMember<AsamPopoverTrigger, "forEach"> | — |
map | 对各元素调用回调并返回结果数组。 | PublicMember<AsamPopoverTrigger, "map"> | — |
filter | 返回满足回调条件的元素。 | PublicMember<AsamPopoverTrigger, "filter"> | — |
reduce | 按升序对各元素进行归约，将累计结果传给下一次回调。 | PublicMember<AsamPopoverTrigger, "reduce"> | — |
reduceRight | 按降序对各元素进行归约，将累计结果传给下一次回调。 | PublicMember<AsamPopoverTrigger, "reduceRight"> | — |
find | 返回第一个满足条件的元素，否则返回 undefined。 | PublicMember<AsamPopoverTrigger, "find"> | — |
findIndex | 返回第一个满足条件的索引，否则返回 -1。 | PublicMember<AsamPopoverTrigger, "findIndex"> | — |
fill | 将 start 至 end 区间的元素替换为固定值并返回数组。 | PublicMember<AsamPopoverTrigger, "fill"> | — |
copyWithin | 将 start 至 end 区间复制到同一数组的 target 位置，并返回该数组。 | PublicMember<AsamPopoverTrigger, "copyWithin"> | — |
entries | 返回各项键值对的迭代器。 | PublicMember<AsamPopoverTrigger, "entries"> | — |
keys | 返回数组键的迭代器。 | () =>
/**
* Native delegated default when omitted.
* @default true
*/
ArrayIterator<number> | — |
values | 返回数组值的迭代器。 | PublicMember<AsamPopoverTrigger, "values"> | — |
includes | 判断数组是否包含指定元素。 | (AsamPopoverTrigger)["includes"] | — |
flatMap | 映射各元素并将结果展开一层，相当于先 map 再 flat(1)。 | PublicMember<AsamPopoverTrigger, "flatMap"> | — |
flat | 按指定深度递归展开子数组，返回新数组。 | <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[] | — |
at | 返回指定索引处的元素。 | (AsamPopoverTrigger)["at"] | — |
[Symbol.iterator] | 迭代器。 | PublicMember<AsamPopoverTrigger, typeof Symbol.iterator> | — |
[Symbol.unscopables] | 在 with 语句中应排除的属性，其对应值为 true。 | 查看完整类型{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } | — |
用法与契约补充说明
数组组合触发
trigger 接受单个 hover/click/focus/contextmenu，也接受这些值组成的数组。以下示例初始使用 ['hover', 'click']，可取消一项观察仅悬停或仅点击的数组触发；全部取消后空数组不启用自动触发。多个触发方式的排队、延迟和关闭行为遵循原生契约，混合悬停与点击时请先移出锚点再观察关闭。
使用约定
默认触发为 hover；需要点击时显式设置 trigger="click"。reference 插槽提供触发元素，default 插槽接收 hide 以完成操作后关闭。visible 省略时采用非受控触发，v-model:visible 用于受控状态。title/content/width、placement、showAfter/hideAfter、teleported/appendTo、persistent、virtualTriggering/virtualRef 均按公开类型使用。hide 与 popperRef 是公开方法/句柄；无独立控件 size。
组合职责与生命周期
reference 或 virtualRef 提供触发目标，default 提供复杂内容，content 用于简单文字。trigger 支持 hover/click/focus/contextmenu 单值及其数组组合，visible/v-model:visible 提供受控状态，disabled 禁用触发。showAfter/hideAfter、enterable、persistent、teleported 与 appendTo 决定交互和生命周期；placement/width/offset/showArrow/popperStyle/popperClass 控制定位与外观。公开 hide 和 popperRef 可与独立指令协作。
原生事件与插槽
仅转发 update:visible、before-enter、before-leave、after-enter、after-leave，保留每次原生发射及其顺序。旧合成 show/hide 事件迁移为 after-enter/after-leave。default 插槽中的 hide 是原生函数；受控 visible 的显隐仍由调用方按原生契约维护。组件不额外截获 Esc、不去重事件或恢复焦点。
关联组件
参数与事件补充说明
参数与事件说明
role
必填：否；声明来源：ASAM 声明。
role 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："group" / "dialog" / "grid" / "listbox" / "menu" / "navigation" / "tooltip" / "tree"
boundariesPadding
必填：否；声明来源：ASAM 声明。
fallbackPlacements
必填：否；声明来源：ASAM 声明。
gpuAcceleration
必填：否；声明来源：ASAM 声明。
gpuAcceleration 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）strategy
必填：否；声明来源：ASAM 声明。
strategy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："fixed" / "absolute"
arrowOffset
必填：否；声明来源：ASAM 声明。
id
必填：否；声明来源：ASAM 声明。
style
必填：否；声明来源：ASAM 声明。
style 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）className
必填：否；声明来源：ASAM 声明。
className 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）pure
必填：否；声明来源：ASAM 声明。
pure 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）focusOnShow
必填：否；声明来源：ASAM 声明。
focusOnShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）trapping
必填：否；声明来源：ASAM 声明。
trapping 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）referenceEl
必填：否；声明来源：ASAM 声明。
referenceEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
triggerTargetEl
必填：否；声明来源：ASAM 声明。
triggerTargetEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
stopPopperMouseEvent
必填：否；声明来源：ASAM 声明。
stopPopperMouseEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）virtualTriggering
必填：否；声明来源：ASAM 声明。
virtualTriggering 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）ariaLabel
必填：否；声明来源：ASAM 声明。
loop
必填：否；声明来源：ASAM 声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）rawContent
必填：否；声明来源：ASAM 声明。
rawContent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）virtualRef
必填：否；声明来源：ASAM 声明。
virtualRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
virtualRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
onMouseenter
必填：否；声明来源：ASAM 声明。
onMouseenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
onMouseleave
必填：否；声明来源：ASAM 声明。
onMouseleave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
onClick
必填：否；声明来源：ASAM 声明。
onClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
onKeydown
必填：否；声明来源：ASAM 声明。
onKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: KeyboardEvent): void
onFocus
必填：否；声明来源：ASAM 声明。
onFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
onBlur
必填：否；声明来源：ASAM 声明。
onBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
onContextmenu
必填：否；声明来源：ASAM 声明。
onContextmenu 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
open
必填：否；声明来源：ASAM 声明。
open 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）focusOnTarget
必填：否；声明来源：ASAM 声明。
focusOnTarget 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）visible
必填：否；声明来源：ASAM 声明。
visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）trigger
必填：否；声明来源：ASAM 声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "focus" / "click" / "contextmenu"
placement
必填：否；声明来源：ASAM 声明。
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"
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）title
必填：否；声明来源：ASAM 声明。
content
必填：否；声明来源：ASAM 声明。
width
必填：否；声明来源：ASAM 声明。
offset
必填：否；声明来源：ASAM 声明。
showArrow
必填：否；声明来源：ASAM 声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）enterable
必填：否；声明来源：ASAM 声明。
enterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）appendTo
必填：否；声明来源：ASAM 声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
showAfter
必填：否；声明来源：ASAM 声明。
hideAfter
必填：否；声明来源：ASAM 声明。
autoClose
必填：否；声明来源：ASAM 声明。
persistent
必填：否；声明来源：ASAM 声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）zIndex
必填：否；声明来源：ASAM 声明。
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:AsamPopoverProps["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<(AsamPopoverProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamPopoverProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamPopoverProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamPopoverProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
onUpdate:visible
必填：否；声明来源：上游声明。
onUpdate:visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: boolean): void
transition
必填：否；声明来源：上游声明。
triggerKeys
必填：否；声明来源：上游声明。
tabindex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
AsamPopoverProps 公开类型视图
import type { AsamPopoverProps, AsamPopoverTrigger } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopoverProps
type PublicContract = {
"role"?: "group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined;
"boundariesPadding"?: number | undefined;
"fallbackPlacements"?: (AsamPopoverProps)["fallbackPlacements"];
"gpuAcceleration"?: boolean | undefined;
"strategy"?: "fixed" | "absolute" | undefined;
"arrowOffset"?: number | undefined;
"id"?: string | undefined;
"style"?: import("vue").StyleValue;
"className"?: AsamPopoverProps["className"];
"pure"?: boolean | undefined;
"focusOnShow"?: boolean | undefined;
"trapping"?: boolean | undefined;
"referenceEl"?: HTMLElement | undefined;
"triggerTargetEl"?: HTMLElement | undefined;
"stopPopperMouseEvent"?: boolean | undefined;
"virtualTriggering"?: boolean | undefined;
"ariaLabel"?: string | undefined;
"loop"?: boolean | undefined;
"rawContent"?: boolean | undefined;
"virtualRef"?: (AsamPopoverProps)["virtualRef"];
"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;
"open"?: boolean | undefined;
"focusOnTarget"?: boolean | undefined;
"visible"?: boolean | null | undefined;
"trigger"?: AsamPopoverTrigger | undefined;
"placement"?: (AsamPopoverProps)["placement"];
"disabled"?: boolean | undefined;
"title"?: string | undefined;
"content"?: string | undefined;
"width"?: string | number | undefined;
"offset"?: number | undefined;
"showArrow"?: boolean | undefined;
"enterable"?: boolean | undefined;
"teleported"?: boolean | undefined;
"appendTo"?: string | HTMLElement | undefined;
"showAfter"?: number | undefined;
"hideAfter"?: number | undefined;
"autoClose"?: number | undefined;
"persistent"?: boolean | undefined;
"zIndex"?: number | undefined;
"effect"?: (AsamPopoverProps)["effect"];
"popperClass"?: AsamPopoverProps["className"];
"popperStyle"?: (AsamPopoverProps)["popperStyle"];
"popperOptions"?: (AsamPopoverProps)["popperOptions"];
"onUpdate:visible"?: ((value: boolean) => void) | undefined;
"transition"?: string | undefined;
"triggerKeys"?: string[] | undefined;
"tabindex"?: string | number | undefined;
};参数与事件说明
update:visible
必填：是；声明来源：ASAM 声明。
before-enter
必填：是；声明来源：ASAM 声明。
before-leave
必填：是；声明来源：ASAM 声明。
after-enter
必填：是；声明来源：ASAM 声明。
after-leave
必填：是；声明来源：ASAM 声明。
AsamPopoverEmits 公开类型视图
import type { AsamPopoverEmits } from '@asam-ui/ui';
// AsamPopoverEmits
type PublicContract = {
"update:visible": [visible: boolean];
"before-enter": (AsamPopoverEmits)["before-enter"];
"before-leave": (AsamPopoverEmits)["before-leave"];
"after-enter": (AsamPopoverEmits)["after-enter"];
"after-leave": (AsamPopoverEmits)["after-leave"];
};参数与事件说明
reference
必填：否；声明来源：ASAM 声明。
reference 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { hide: () => void; }): unknown
AsamPopoverSlots 公开类型视图
import type { AsamPopoverSlots } from '@asam-ui/ui';
// AsamPopoverSlots
type PublicContract = {
"reference"?: (() => unknown) | undefined;
"default"?: ((props: { hide: () => void; }) => unknown) | undefined;
};参数与事件说明
popperRef
必填：是；声明来源：上游声明。
hide
必填：是；声明来源：上游声明。
hide 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamPopoverExpose 公开类型视图
import type { AsamPopoverExpose } from '@asam-ui/ui';
// AsamPopoverExpose
type PublicContract = {
"popperRef": (AsamPopoverExpose)["popperRef"];
"hide": () => void;
};组合契约按分支生效；请同时查看公开类型。
参数与事件说明
length
必填：按分支；声明来源：依赖声明。
toString
必填：按分支；声明来源：依赖声明。
toString 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；ASAM 声明）toLocaleString
必填：按分支；声明来源：依赖声明。
toLocaleString 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): string
事件参数完整签名见公开类型视图：(AsamPopoverTrigger)["toLocaleString"]。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；ASAM 声明）pop
必填：按分支；声明来源：依赖声明。
pop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "pop">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
push
必填：按分支；声明来源：依赖声明。
push 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(...items: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "push">>, (...args: never[]) => unknown>> extends [...infer Rest] ? Rest : never): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
concat
必填：按分支；声明来源：依赖声明。
concat 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：(AsamPopoverTrigger)["concat"]。
事件参数完整签名见公开类型视图：(AsamPopoverTrigger)["concat"]。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
join
必填：按分支；声明来源：依赖声明。
join 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(separator?: string | undefined): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reverse
必填：按分支；声明来源：依赖声明。
reverse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "reverse">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
shift
必填：按分支；声明来源：依赖声明。
shift 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "shift">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
slice
必填：按分支；声明来源：依赖声明。
slice 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(start?: number | undefined, end?: number | undefined): ReturnType<Extract<NonNullable<(AsamPopoverTrigger)["slice"]>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
sort
必填：按分支；声明来源：依赖声明。
sort 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(compareFn?: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "sort">>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "sort">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
splice
必填：按分支；声明来源：依赖声明。
splice 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "splice">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "splice">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
unshift
必填：按分支；声明来源：依赖声明。
unshift 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(...items: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "unshift">>, (...args: never[]) => unknown>> extends [...infer Rest] ? Rest : never): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
indexOf
必填：按分支；声明来源：依赖声明。
indexOf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(searchElement: Parameters<Extract<NonNullable<(AsamPopoverTrigger)["indexOf"]>, (...args: never[]) => unknown>>[0], fromIndex?: number | undefined): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
lastIndexOf
必填：按分支；声明来源：依赖声明。
lastIndexOf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(searchElement: Parameters<Extract<NonNullable<(AsamPopoverTrigger)["lastIndexOf"]>, (...args: never[]) => unknown>>[0], fromIndex?: number | undefined): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
every
必填：按分支；声明来源：依赖声明。
every 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "every">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "every">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
some
必填：按分支；声明来源：依赖声明。
some 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(predicate: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "some">>, (...args: never[]) => unknown>>[0], thisArg?: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
forEach
必填：按分支；声明来源：依赖声明。
forEach 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(callbackfn: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "forEach">>, (...args: never[]) => unknown>>[0], thisArg?: any): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
map
必填：按分支；声明来源：依赖声明。
map 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：<U>(callbackfn: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "map">>, (...args: never[]) => unknown>>[0], thisArg?: any): U[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
filter
必填：按分支；声明来源：依赖声明。
filter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "filter">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "filter">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reduce
必填：按分支；声明来源：依赖声明。
reduce 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduce">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduce">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduce">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reduceRight
必填：按分支；声明来源：依赖声明。
reduceRight 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduceRight">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduceRight">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "reduceRight">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
find
必填：按分支；声明来源：依赖声明。
find 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "find">。
事件参数完整签名见公开类型视图：PublicMember<AsamPopoverTrigger, "find">。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
findIndex
必填：按分支；声明来源：依赖声明。
findIndex 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(predicate: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "findIndex">>, (...args: never[]) => unknown>>[0], thisArg?: any): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
fill
必填：按分支；声明来源：依赖声明。
fill 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(value: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "fill">>, (...args: never[]) => unknown>>[0], start?: number | undefined, end?: number | undefined): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "fill">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
copyWithin
必填：按分支；声明来源：依赖声明。
copyWithin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(target: number, start: number, end?: number | undefined): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "copyWithin">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
entries
必填：按分支；声明来源：依赖声明。
entries 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "entries">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
keys
必填：按分支；声明来源：依赖声明。
keys 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ArrayIterator<number>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
values
必填：按分支；声明来源：依赖声明。
values 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "values">>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
includes
必填：按分支；声明来源：依赖声明。
includes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(searchElement: Parameters<Extract<NonNullable<(AsamPopoverTrigger)["includes"]>, (...args: never[]) => unknown>>[0], fromIndex?: number | undefined): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
flatMap
必填：按分支；声明来源：依赖声明。
flatMap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：<U, This = undefined>(callback: Parameters<Extract<NonNullable<PublicMember<AsamPopoverTrigger, "flatMap">>, (...args: never[]) => unknown>>[0], thisArg?: This | undefined): U[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
flat
必填：按分支；声明来源：依赖声明。
flat 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
at
必填：按分支；声明来源：依赖声明。
at 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(index: number): ReturnType<Extract<NonNullable<(AsamPopoverTrigger)["at"]>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
[Symbol.iterator]
必填：按分支；声明来源：依赖声明。
[Symbol.iterator] 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
事件参数：(): ReturnType<Extract<NonNullable<PublicMember<AsamPopoverTrigger, typeof Symbol.iterator>>, (...args: never[]) => unknown>>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
[Symbol.unscopables]
必填：按分支；声明来源：依赖声明。
[Symbol.unscopables] 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 5
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
AsamPopoverTrigger 公开类型视图
import type { AsamPopoverTrigger, AsamPopoverProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopoverTrigger
type PublicContract = AsamPopoverTrigger;