使用场景
按需展开相关说明，减少初始页面长度。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<AsamCollapse
:model-value="active"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
active = value;
}
"
>
<AsamCollapseItem title="基础说明" name="intro">
<p class="example-paragraph">本地说明内容。</p>
</AsamCollapseItem>
<AsamCollapseItem name="detail">
<template #title>补充说明</template>
<p class="example-paragraph">可展开的补充内容。</p>
</AsamCollapseItem>
<AsamCollapseItem title="禁用项" name="locked" disabled />
</AsamCollapse>
<p class="example-paragraph" role="status">展开项：{{ active.join(', ') }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseBasicDemo' });
import { ref } from 'vue';
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
const active = ref<string[]>(['intro']);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamCollapse
:model-value="active"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
active = value;
}
"
>
<AsamCollapseItem title="基础说明" name="intro">
<p class="example-paragraph">本地说明内容。</p>
</AsamCollapseItem>
<AsamCollapseItem name="detail">
<template #title>补充说明</template>
<p class="example-paragraph">可展开的补充内容。</p>
</AsamCollapseItem>
<AsamCollapseItem title="禁用项" name="locked" disabled />
</AsamCollapse>
<p class="example-paragraph" role="status">展开项：{{ active.join(', ') }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseBasicDemo' });
import { ref } from 'vue';
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
const active = ref(['intro']);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
v-model 管理 activeNames，accordion 控制单项展开；change 反馈当前值。普通模式使用名称数组，单项模式按公开类型配置。default 插槽放 CollapseItem，宿主管理展开状态。
完整使用场景
基础用法
可同时展开多个面板，面板之间不影响
基础用法
<template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeNames"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
@change="handleChange"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapBasicDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamCollapseModelValue } from '@asam-ui/ui';
const activeNames = ref(['1']);
const handleChange = (val: AsamCollapseModelValue) => {
console.log(val);
};
</script><template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeNames"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
@change="handleChange"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapBasicDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const activeNames = ref(['1']);
const handleChange = (val) => {
console.log(val);
};
</script>
手风琴效果
每次只能展开一个面板
通过 accordion 属性来设置是否以手风琴模式显示。
手风琴效果
<template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeName"
accordion
@update:model-value="
(value) => {
if (typeof value === 'string') activeName = value;
}
"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapAccordionDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const activeName = ref('1');
</script><template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeName"
accordion
@update:model-value="
(value) => {
if (typeof value === 'string') activeName = value;
}
"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapAccordionDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const activeName = ref('1');
</script>
自定义面板标题
除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。
从版本 2.9.10开始， title 插槽提供一个 isActive 属性，显示当前折叠项是否活跃。
个性化
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-collapse">
<AsamCollapse accordion>
<AsamCollapseItem name="1">
<template #title="{ isActive }">
<div :class="['title-wrapper', { 'is-active': isActive }]">
一致性
<AsamIcon class="header-icon">
<info-filled />
</AsamIcon>
</div>
</template>
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapCustomizationDemo' });
import { AsamCollapse, AsamCollapseItem, AsamIcon } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
</script>
<style scoped>
.title-wrapper {
display: flex;
align-items: center;
gap: 4px;
}
.title-wrapper.is-active {
color: var(--el-color-primary);
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-collapse">
<AsamCollapse accordion>
<AsamCollapseItem name="1">
<template #title="{ isActive }">
<div :class="['title-wrapper', { 'is-active': isActive }]">
一致性
<AsamIcon class="header-icon">
<info-filled />
</AsamIcon>
</div>
</template>
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapCustomizationDemo' });
import { AsamCollapse, AsamCollapseItem, AsamIcon } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
</script>
<style scoped>
.title-wrapper {
display: flex;
align-items: center;
gap: 4px;
}
.title-wrapper.is-active {
color: var(--el-color-primary);
}
</style>
自定义图标 2.8.3
除了使用 icon 属性外，您还可以自定义面板项目图标，从而添加自定义内容。
自定义图标
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeNames"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
@change="handleChange"
>
<AsamCollapseItem title="一致性" name="1" :icon="CaretRight">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<template #icon="{ isActive }">
<span class="icon-ele">
{{ isActive ? 'Expanded' : '已收起' }}
</span>
</template>
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapCustomIconDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
import { CaretRight } from '@asam-ui/icons-vue';
import type { AsamCollapseModelValue } from '@asam-ui/ui';
const activeNames = ref(['1']);
const handleChange = (val: AsamCollapseModelValue) => {
console.log(val);
};
</script>
<style scoped>
.icon-ele {
margin: 0 8px 0 auto;
color: #409eff;
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-collapse">
<AsamCollapse
:model-value="activeNames"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
@change="handleChange"
>
<AsamCollapseItem title="一致性" name="1" :icon="CaretRight">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<template #icon="{ isActive }">
<span class="icon-ele">
{{ isActive ? 'Expanded' : '已收起' }}
</span>
</template>
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapCustomIconDemo' });
import { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
import { CaretRight } from '@asam-ui/icons-vue';
const activeNames = ref(['1']);
const handleChange = (val) => {
console.log(val);
};
</script>
<style scoped>
.icon-ele {
margin: 0 8px 0 auto;
color: #409eff;
}
</style>
自定义图标位置 2.9.10
使用 expand-icon-position 属性，您可以自定义图标位置。
自定义图标位置 2.9.10
<template>
<div class="demo-collapse-position">
<div class="flex items-center mb-4">
<span class="mr-4">展开图标位置： </span>
<AsamSwitch
:model-value="position"
inactive-value="left"
active-value="right"
inactive-text="left"
active-text="right"
class="ui032-position-switch"
@update:model-value="
(value) => {
if (value === 'left' || value === 'right') position = value;
}
"
/>
</div>
<AsamCollapse :expand-icon-position="position">
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapCustomIconPositionDemo' });
import { AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamCollapseIconPositionType } from '@asam-ui/ui';
const position = ref<AsamCollapseIconPositionType>('left');
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.ui032-position-switch {
--el-switch-off-color: #88b8fe;
}
</style><template>
<div class="demo-collapse-position">
<div class="flex items-center mb-4">
<span class="mr-4">展开图标位置： </span>
<AsamSwitch
:model-value="position"
inactive-value="left"
active-value="right"
inactive-text="left"
active-text="right"
class="ui032-position-switch"
@update:model-value="
(value) => {
if (value === 'left' || value === 'right') position = value;
}
"
/>
</div>
<AsamCollapse :expand-icon-position="position">
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapCustomIconPositionDemo' });
import { AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const position = ref('left');
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.ui032-position-switch {
--el-switch-off-color: #88b8fe;
}
</style>
阻止折叠 2.9.11
设置 beforeChange 属性，若返回 false 或者返回 Promise 且被 reject ，则停止切换。
阻止折叠 2.9.11
<template>
<div v-asam-loading="loading" class="demo-collapse">
<div class="flex items-center mb-4">
<span class="mr-4">关闭前返回： </span>
<AsamSwitch
:model-value="before"
:inactive-value="false"
:active-value="true"
inactive-text="false"
active-text="true"
@update:model-value="
(value) => {
if (typeof value === 'boolean') before = value;
}
"
/>
</div>
<AsamCollapse
:model-value="activeNames"
:before-collapse="beforeCollapse"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCollapseCapPreventCollapsingDemo' });
import { vAsamLoading, AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const before = ref(true);
const activeNames = ref(['1']);
const loading = ref(false);
const beforeCollapse = (): Promise<boolean> => {
loading.value = true;
return new Promise((resolve) => {
setTimeout(() => {
loading.value = false;
return resolve(before.value);
}, 1000);
});
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
</style><template>
<div v-asam-loading="loading" class="demo-collapse">
<div class="flex items-center mb-4">
<span class="mr-4">关闭前返回： </span>
<AsamSwitch
:model-value="before"
:inactive-value="false"
:active-value="true"
inactive-text="false"
active-text="true"
@update:model-value="
(value) => {
if (typeof value === 'boolean') before = value;
}
"
/>
</div>
<AsamCollapse
:model-value="activeNames"
:before-collapse="beforeCollapse"
@update:model-value="
(value) => {
if (Array.isArray(value) && value.every((name) => typeof name === 'string'))
activeNames = value;
}
"
>
<AsamCollapseItem title="一致性" name="1">
<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>
<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>
</AsamCollapseItem>
<AsamCollapseItem title="反馈" name="2">
<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>
<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>
</AsamCollapseItem>
<AsamCollapseItem title="效率" name="3">
<div>简化流程：操作步骤应简单直观。</div>
<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>
<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>
</AsamCollapseItem>
<AsamCollapseItem title="可控性" name="4">
<div>决策自主：可以给出操作建议，但不替用户作决定。</div>
<div>结果可控：允许用户取消、中止或结束当前操作。</div>
</AsamCollapseItem>
</AsamCollapse>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCollapseCapPreventCollapsingDemo' });
import { vAsamLoading, AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';
import { ref } from 'vue';
const before = ref(true);
const activeNames = ref(['1']);
const loading = ref(false);
const beforeCollapse = () => {
loading.value = true;
return new Promise((resolve) => {
setTimeout(() => {
loading.value = false;
return resolve(before.value);
}, 1000);
});
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
</style>API
属性 AsamCollapseProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
accordion | 是否手风琴模式 | boolean | undefined | false |
modelValue | 当前活动面板，在手风琴模式下其类型是string，在其他模式下是array | AsamCollapseModelValue | undefined | 工厂函数（每个实例创建） |
expandIconPosition | 设置展开图标位置 | enum"right" | "left"完整类型：AsamCollapseIconPositionType | undefined | "right" |
beforeCollapse | 折叠状态更改之前的折叠钩子。返回 false 或者返回 Promise 且被 reject 则停止切换 | (AsamCollapseProps)["beforeCollapse"] | — |
onUpdate:modelValue | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
onChange | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamCollapseProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamCollapseProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamCollapseProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamCollapseProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamCollapseProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamCollapseProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
实例方法与状态 AsamCollapseExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamCollapseExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamCollapseProps | — |
$attrs | — | AsamCollapseExpose["$attrs"] | — |
$refs | — | AsamCollapseExpose["$refs"] | — |
$slots | — | AsamCollapseSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | ((event: "change", value: AsamCollapseModelValue) => void) & ((event: "update:modelValue", value: AsamCollapseModelValue) => void) | — |
$el | — | any | — |
$options | — | (AsamCollapseExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamCollapseExpose)["$nextTick"] | — |
$watch | — | (AsamCollapseExpose)["$watch"] | — |
modelValue | — | AsamCollapseModelValue | — |
expandIconPosition | — | enum"right" | "left"完整类型：AsamCollapseIconPositionType | — |
onChange | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
onUpdate:modelValue | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
accordion | 是否手风琴模式 | boolean | undefined | — |
beforeCollapse | 折叠状态更改之前的折叠钩子。返回 false 或者返回 Promise 且被 reject 则停止切换 | (AsamCollapseExpose)["beforeCollapse"] | — |
activeNames | 当前展开项目的名称。 | (string | number)[] | — |
setActiveNames | — | (_activeNames: AsamCollapseActiveName[]) => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamCollapseExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamCollapseExpose["$router"] | — |
类型 AsamCollapseInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamCollapseExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamCollapseProps | — |
$attrs | — | AsamCollapseExpose["$attrs"] | — |
$refs | — | AsamCollapseExpose["$refs"] | — |
$slots | — | AsamCollapseSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | ((event: "change", value: AsamCollapseModelValue) => void) & ((event: "update:modelValue", value: AsamCollapseModelValue) => void) | — |
$el | — | any | — |
$options | — | (AsamCollapseInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamCollapseInstance)["$nextTick"] | — |
$watch | — | (AsamCollapseInstance)["$watch"] | — |
modelValue | — | AsamCollapseModelValue | — |
expandIconPosition | — | enum"right" | "left"完整类型：AsamCollapseIconPositionType | — |
onChange | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
onUpdate:modelValue | — | ((value: AsamCollapseModelValue) => any) | undefined | — |
accordion | 是否手风琴模式 | boolean | undefined | — |
beforeCollapse | 折叠状态更改之前的折叠钩子。返回 false 或者返回 Promise 且被 reject 则停止切换 | (AsamCollapseInstance)["beforeCollapse"] | — |
activeNames | 当前展开项目的名称。 | (string | number)[] | — |
setActiveNames | — | (_activeNames: AsamCollapseActiveName[]) => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamCollapseExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamCollapseExpose["$router"] | — |
插槽 AsamCollapseSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamCollapseSlots)["default"] | — |
类型 AsamCollapseActiveName
类型 AsamCollapseContext
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
activeNames | — | Ref<AsamCollapseActiveName[], AsamCollapseActiveName[]> | — |
handleItemClick | — | (name: AsamCollapseActiveName) => void | — |
事件 AsamCollapseEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | (value: AsamCollapseModelValue) => value is string | number | AsamCollapseActiveName[] | — |
change | — | (value: AsamCollapseModelValue) => value is string | number | AsamCollapseActiveName[] | — |
类型 AsamCollapseIconPositionType
类型 AsamCollapseItemPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | — | boolean | undefined | — |
title | — | string | undefined | — |
name | — | (AsamCollapseItemPropsPublic)["name"] | — |
icon | — | (AsamCollapseItemPropsPublic)["icon"] | — |
类型 AsamCollapseModelValue
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
length | 获取或设置数组长度，等于最高索引加一。 | number | — |
toString | 返回数组的字符串表示。 | () => string | undefined |
toLocaleString | 通过各元素的 toLocaleString 方法返回数组的本地化字符串。 | (AsamCollapseModelValue)["toLocaleString"] | undefined |
pop | 移除并返回最后一个元素；空数组返回 undefined 且不修改数组。 | () => AsamCollapseActiveName | undefined | — |
push | 在末尾追加元素并返回新的数组长度。 | (...items: AsamCollapseActiveName[]) => number | — |
concat | 合并数组，返回新数组而不修改原数组。 | PublicMember<AsamCollapseModelValue, "concat"> | — |
join | 以指定分隔符连接所有数组元素。 | (separator?: string) => string | — |
reverse | 原地反转数组，并返回同一数组引用。 | () => AsamCollapseActiveName[] | — |
shift | 移除并返回首个元素；空数组返回 undefined 且不修改数组。 | () => AsamCollapseActiveName | undefined | — |
slice | 返回数组区间的副本；起止位置支持负索引，例如 -2 表示倒数第二项。 | PublicMember<AsamCollapseModelValue, "slice"> | — |
sort | 原地排序数组，并返回同一数组引用。 | (compareFn?: ((a: AsamCollapseActiveName, b: AsamCollapseActiveName) => number) | undefined) => AsamCollapseActiveName[] | — |
splice | 删除并可插入元素，返回被删除的元素。 | 查看完整类型{ (start: number, deleteCount?: number): AsamCollapseActiveName[]; (start: number, deleteCount: number, ...items: AsamCollapseActiveName[]): AsamCollapseActiveName[]; } | — |
unshift | 在开头插入元素并返回新长度。 | (...items: AsamCollapseActiveName[]) => number | — |
indexOf | 返回值首次出现的索引，不存在时返回 -1。 | PublicMember<AsamCollapseModelValue, "indexOf"> | — |
lastIndexOf | 返回值最后出现的索引，不存在时返回 -1。 | PublicMember<AsamCollapseModelValue, "lastIndexOf"> | — |
every | 判断全部元素是否满足指定条件。 | 查看完整类型{ <S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any): boolean; } | — |
some | 判断是否至少有一个元素满足指定条件。 | (predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any) => boolean | — |
forEach | 对各元素执行指定操作。 | (callbackfn: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => void, thisArg?: any) => void | — |
map | 对各元素调用回调并返回结果数组。 | <U>(callbackfn: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => U, thisArg?: any) => U[] | — |
filter | 返回满足回调条件的元素。 | 查看完整类型{ <S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => value is S, thisArg?: any): S[]; (predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any): AsamCollapseActiveName[]; } | — |
reduce | 按升序对各元素进行归约，将累计结果传给下一次回调。 | PublicMember<AsamCollapseModelValue, "reduce"> | — |
reduceRight | 按降序对各元素进行归约，将累计结果传给下一次回调。 | PublicMember<AsamCollapseModelValue, "reduceRight"> | — |
find | 返回第一个满足条件的元素，否则返回 undefined。 | 查看完整类型{ <S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => unknown, thisArg?: any): AsamCollapseActiveName | undefined; } | — |
findIndex | 返回第一个满足条件的索引，否则返回 -1。 | (predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => unknown, thisArg?: any) => number | — |
fill | 将 start 至 end 区间的元素替换为固定值并返回数组。 | (value: AsamCollapseActiveName, start?: number, end?: number) => AsamCollapseActiveName[] | — |
copyWithin | 将 start 至 end 区间复制到同一数组的 target 位置，并返回该数组。 | (target: number, start: number, end?: number) => AsamCollapseActiveName[] | — |
entries | 返回各项键值对的迭代器。 | () => ArrayIterator<[number, AsamCollapseActiveName]> | — |
keys | 返回数组键的迭代器。 | () => ArrayIterator<number> | — |
values | 返回数组值的迭代器。 | () => ArrayIterator<AsamCollapseActiveName> | — |
includes | 判断数组是否包含指定元素。 | PublicMember<AsamCollapseModelValue, "includes"> | — |
flatMap | 映射各元素并将结果展开一层，相当于先 map 再 flat(1)。 | 查看完整类型<U, This = undefined>(callback: (this: This, value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => U | readonly U[], thisArg?: This | undefined) => U[] | — |
flat | 按指定深度递归展开子数组，返回新数组。 | <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[] | — |
at | 返回指定索引处的元素。 | PublicMember<AsamCollapseModelValue, "at"> | — |
[Symbol.iterator] | 迭代器。 | () => ArrayIterator<AsamCollapseActiveName> | — |
[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; } | — |
类型 AsamCollapsePropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | — | (AsamCollapsePropsPublic)["modelValue"] | — |
accordion | — | boolean | undefined | — |
expandIconPosition | — | enum"right" | "left"完整类型：(AsamCollapsePropsPublic)["expandIconPosition"] | — |
beforeCollapse | — | (AsamCollapsePropsPublic)["beforeCollapse"] | — |
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
accordion
必填：否；声明来源：上游声明。
accordion 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
modelValue
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
expandIconPosition
必填：否；声明来源：上游声明。
expandIconPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："right" / "left"
默认值与来源
"right"（已安装运行时；已安装组件）固定上游文档默认：right（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'right'（2.14.7；源码事实，未作为 ASAM 运行实测）
beforeCollapse
必填：否；声明来源：上游声明。
beforeCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(name: AsamCollapseActiveName): ReturnType<Extract<NonNullable<(AsamCollapseProps)["beforeCollapse"]>, (...args: never[]) => unknown>>
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onUpdate:modelValue
必填：否；声明来源：上游声明。
onUpdate:modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
style
必填：否；声明来源：依赖声明。
AsamCollapseProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamCollapseProps, AsamCollapseModelValue, AsamCollapseIconPositionType, AsamCollapseActiveName, AsamCollapseExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCollapseProps
type PublicContract = {
readonly "accordion"?: boolean | undefined;
readonly "modelValue"?: AsamCollapseModelValue | undefined;
readonly "expandIconPosition"?: AsamCollapseIconPositionType | undefined;
readonly "beforeCollapse"?: (AsamCollapseProps)["beforeCollapse"];
readonly "onUpdate:modelValue"?: ((value: AsamCollapseModelValue) => any) | undefined;
readonly "onChange"?: ((value: AsamCollapseModelValue) => any) | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamCollapseProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamCollapseProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamCollapseProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamCollapseProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamCollapseProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamCollapseProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "change", ...args: [value: AsamCollapseModelValue]): void
事件参数：(event: "update:modelValue", ...args: [value: AsamCollapseModelValue]): void
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamCollapseExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
modelValue
必填：是；声明来源：上游声明。
expandIconPosition
必填：是；声明来源：上游声明。
expandIconPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："right" / "left"
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
onUpdate:modelValue
必填：否；声明来源：上游声明。
onUpdate:modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
accordion
必填：否；声明来源：上游声明。
accordion 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
beforeCollapse
必填：否；声明来源：上游声明。
beforeCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(name: AsamCollapseActiveName): ReturnType<Extract<NonNullable<(AsamCollapseExpose)["beforeCollapse"]>, (...args: never[]) => unknown>>
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
activeNames
必填：是；声明来源：上游声明。
activeNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
setActiveNames
必填：是；声明来源：上游声明。
setActiveNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(_activeNames: AsamCollapseActiveName[]): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamCollapseExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamCollapseExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamCollapseExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamCollapseExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamCollapseExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamCollapseExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamCollapseItemExpose["title"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamCollapseExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamCollapseExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamCollapseExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamCollapseExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamCollapseExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamCollapseExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamCollapseExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamCollapseExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamCollapseExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamCollapseExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamCollapseExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamCollapseExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamCollapseExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamCollapseExpose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, Ref, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamCollapseExpose, AsamTableColumnExpose, AsamCollapseProps, AsamCollapseSlots, AsamCollapseModelValue, AsamCollapseActiveName, AsamCollapseIconPositionType, AsamCollapseItemExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCollapseExpose
type PublicContract = {
"$": AsamCollapseExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamCollapseProps;
"$attrs": AsamCollapseExpose["$attrs"];
"$refs": AsamCollapseExpose["$refs"];
"$slots": AsamCollapseSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": ((event: "change", value: AsamCollapseModelValue) => void) & ((event: "update:modelValue", value: AsamCollapseModelValue) => void);
"$el": any;
"$options": (AsamCollapseExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamCollapseExpose)["$nextTick"];
"$watch": (AsamCollapseExpose)["$watch"];
readonly "modelValue": AsamCollapseModelValue;
readonly "expandIconPosition": AsamCollapseIconPositionType;
readonly "onChange"?: ((value: AsamCollapseModelValue) => any) | undefined;
readonly "onUpdate:modelValue"?: ((value: AsamCollapseModelValue) => any) | undefined;
readonly "accordion"?: boolean | undefined;
readonly "beforeCollapse"?: (AsamCollapseExpose)["beforeCollapse"];
"activeNames": (string | number)[];
"setActiveNames": (_activeNames: AsamCollapseActiveName[]) => void;
"$route": AsamCollapseExpose["$route"];
"$router": AsamCollapseExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "change", ...args: [value: AsamCollapseModelValue]): void
事件参数：(event: "update:modelValue", ...args: [value: AsamCollapseModelValue]): void
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamCollapseInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
modelValue
必填：是；声明来源：上游声明。
expandIconPosition
必填：是；声明来源：上游声明。
expandIconPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："right" / "left"
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
onUpdate:modelValue
必填：否；声明来源：上游声明。
onUpdate:modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): any
accordion
必填：否；声明来源：上游声明。
accordion 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
beforeCollapse
必填：否；声明来源：上游声明。
beforeCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(name: AsamCollapseActiveName): ReturnType<Extract<NonNullable<(AsamCollapseInstance)["beforeCollapse"]>, (...args: never[]) => unknown>>
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
activeNames
必填：是；声明来源：上游声明。
activeNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
setActiveNames
必填：是；声明来源：上游声明。
setActiveNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(_activeNames: AsamCollapseActiveName[]): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamCollapseExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamCollapseExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamCollapseExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamCollapseExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamCollapseExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamCollapseExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamCollapseExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamCollapseItemExpose["title"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamCollapseExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamCollapseExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamCollapseExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamCollapseExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamCollapseExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamCollapseExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamCollapseExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamCollapseExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamCollapseExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamCollapseExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamCollapseExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamCollapseExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamCollapseExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamCollapseExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamCollapseInstance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, Ref, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamCollapseInstance, AsamCollapseExpose, AsamTableColumnExpose, AsamCollapseProps, AsamCollapseSlots, AsamCollapseModelValue, AsamCollapseActiveName, AsamCollapseIconPositionType, AsamCollapseItemExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCollapseInstance
type PublicContract = {
"$": AsamCollapseExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamCollapseProps;
"$attrs": AsamCollapseExpose["$attrs"];
"$refs": AsamCollapseExpose["$refs"];
"$slots": AsamCollapseSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": ((event: "change", value: AsamCollapseModelValue) => void) & ((event: "update:modelValue", value: AsamCollapseModelValue) => void);
"$el": any;
"$options": (AsamCollapseInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamCollapseInstance)["$nextTick"];
"$watch": (AsamCollapseInstance)["$watch"];
readonly "modelValue": AsamCollapseModelValue;
readonly "expandIconPosition": AsamCollapseIconPositionType;
readonly "onChange"?: ((value: AsamCollapseModelValue) => any) | undefined;
readonly "onUpdate:modelValue"?: ((value: AsamCollapseModelValue) => any) | undefined;
readonly "accordion"?: boolean | undefined;
readonly "beforeCollapse"?: (AsamCollapseInstance)["beforeCollapse"];
"activeNames": (string | number)[];
"setActiveNames": (_activeNames: AsamCollapseActiveName[]) => void;
"$route": AsamCollapseExpose["$route"];
"$router": AsamCollapseExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：上游声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
AsamCollapseSlots 公开类型视图
import type { AsamCollapseSlots, AsamCollapseExpose, AsamTableColumnExpose } from '@asam-ui/ui';
// AsamCollapseSlots
type PublicContract = {
"default"?: (AsamCollapseSlots)["default"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};组合契约按分支生效；请同时查看公开类型。
AsamCollapseActiveName 公开类型视图
import type { AsamCollapseActiveName } from '@asam-ui/ui';
// AsamCollapseActiveName
type PublicContract = AsamCollapseActiveName;参数与事件说明
activeNames
必填：是；声明来源：上游声明。
activeNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
handleItemClick
必填：是；声明来源：上游声明。
handleItemClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(name: AsamCollapseActiveName): void
AsamCollapseContext 公开类型视图
import type { Ref } from 'vue';
import type { AsamCollapseContext, AsamCollapseActiveName } from '@asam-ui/ui';
// AsamCollapseContext
type PublicContract = {
"activeNames": Ref<AsamCollapseActiveName[], AsamCollapseActiveName[]>;
"handleItemClick": (name: AsamCollapseActiveName) => void;
};参数与事件说明
update:modelValue
必填：是；声明来源：上游声明。
update:modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): value is string | number | AsamCollapseActiveName[]
change
必填：是；声明来源：上游声明。
change 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: AsamCollapseModelValue): value is string | number | AsamCollapseActiveName[]
AsamCollapseEmits 公开类型视图
import type { AsamCollapseEmits, AsamCollapseModelValue, AsamCollapseActiveName, AsamCollapseExpose } from '@asam-ui/ui';
// AsamCollapseEmits
type PublicContract = {
"update:modelValue": (value: AsamCollapseModelValue) => value is string | number | AsamCollapseActiveName[];
"change": (value: AsamCollapseModelValue) => value is string | number | AsamCollapseActiveName[];
};组合契约按分支生效；请同时查看公开类型。
AsamCollapseIconPositionType 公开类型视图
import type { AsamCollapseIconPositionType } from '@asam-ui/ui';
// AsamCollapseIconPositionType
type PublicContract = AsamCollapseIconPositionType;参数与事件说明
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
title
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
icon
必填：否；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamCollapseItemPropsPublic)["icon"]>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游源码默认表达式：ArrowRight（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCollapseItemPropsPublic 公开类型视图
import type { AsamCollapseItemPropsPublic, AsamCollapseProps, AsamCollapseExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCollapseItemPropsPublic
type PublicContract = {
readonly "disabled"?: boolean | undefined;
readonly "title"?: string | undefined;
readonly "name"?: (AsamCollapseItemPropsPublic)["name"];
readonly "icon"?: (AsamCollapseItemPropsPublic)["icon"];
};组合契约按分支生效；请同时查看公开类型。
参数与事件说明
length
必填：按分支；声明来源：依赖声明。
toString
必填：按分支；声明来源：依赖声明。
toString 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；ASAM 声明）toLocaleString
必填：按分支；声明来源：依赖声明。
toLocaleString 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): string
事件参数完整签名见公开类型视图：(AsamCollapseModelValue)["toLocaleString"]。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；ASAM 声明）pop
必填：按分支；声明来源：依赖声明。
pop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): AsamCollapseActiveName | undefined
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
push
必填：按分支；声明来源：依赖声明。
push 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(...items: AsamCollapseActiveName[]): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
concat
必填：按分支；声明来源：依赖声明。
concat 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：PublicMember<AsamCollapseModelValue, "concat">
事件参数：PublicMember<AsamCollapseModelValue, "concat">
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
join
必填：按分支；声明来源：依赖声明。
join 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(separator?: string | undefined): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reverse
必填：按分支；声明来源：依赖声明。
reverse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
shift
必填：按分支；声明来源：依赖声明。
shift 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): AsamCollapseActiveName | undefined
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
slice
必填：按分支；声明来源：依赖声明。
slice 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：PublicMember<AsamCollapseModelValue, "slice">
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
sort
必填：按分支；声明来源：依赖声明。
sort 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(compareFn?: ((a: AsamCollapseActiveName, b: AsamCollapseActiveName) => number) | undefined): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
splice
必填：按分支；声明来源：依赖声明。
splice 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(start: number, deleteCount?: number | undefined): AsamCollapseActiveName[]
事件参数：(start: number, deleteCount: number, ...items: AsamCollapseActiveName[]): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
unshift
必填：按分支；声明来源：依赖声明。
unshift 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(...items: AsamCollapseActiveName[]): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
indexOf
必填：按分支；声明来源：依赖声明。
indexOf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(searchElement: AsamCollapseActiveName, fromIndex?: number | undefined): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
lastIndexOf
必填：按分支；声明来源：依赖声明。
lastIndexOf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(searchElement: AsamCollapseActiveName, fromIndex?: number | undefined): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
every
必填：按分支；声明来源：依赖声明。
every 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => value is S, thisArg?: any): this is S[]
事件参数：(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
some
必填：按分支；声明来源：依赖声明。
some 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
forEach
必填：按分支；声明来源：依赖声明。
forEach 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(callbackfn: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => void, thisArg?: any): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
map
必填：按分支；声明来源：依赖声明。
map 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<U>(callbackfn: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => U, thisArg?: any): U[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
filter
必填：按分支；声明来源：依赖声明。
filter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => value is S, thisArg?: any): S[]
事件参数：(predicate: (value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => unknown, thisArg?: any): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reduce
必填：按分支；声明来源：依赖声明。
reduce 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(callbackfn: (previousValue: AsamCollapseActiveName, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => AsamCollapseActiveName): AsamCollapseActiveName
事件参数：(callbackfn: (previousValue: AsamCollapseActiveName, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => AsamCollapseActiveName, initialValue: AsamCollapseActiveName): AsamCollapseActiveName
事件参数：<U>(callbackfn: (previousValue: U, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => U, initialValue: U): U
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
reduceRight
必填：按分支；声明来源：依赖声明。
reduceRight 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(callbackfn: (previousValue: AsamCollapseActiveName, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => AsamCollapseActiveName): AsamCollapseActiveName
事件参数：(callbackfn: (previousValue: AsamCollapseActiveName, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => AsamCollapseActiveName, initialValue: AsamCollapseActiveName): AsamCollapseActiveName
事件参数：<U>(callbackfn: (previousValue: U, currentValue: AsamCollapseActiveName, currentIndex: number, array: AsamCollapseActiveName[]) => U, initialValue: U): U
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
find
必填：按分支；声明来源：依赖声明。
find 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<S extends AsamCollapseActiveName>(predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => value is S, thisArg?: any): S | undefined
事件参数：(predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => unknown, thisArg?: any): AsamCollapseActiveName | undefined
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
findIndex
必填：按分支；声明来源：依赖声明。
findIndex 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(predicate: (value: AsamCollapseActiveName, index: number, obj: AsamCollapseActiveName[]) => unknown, thisArg?: any): number
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
fill
必填：按分支；声明来源：依赖声明。
fill 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(value: AsamCollapseActiveName, start?: number | undefined, end?: number | undefined): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
copyWithin
必填：按分支；声明来源：依赖声明。
copyWithin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(target: number, start: number, end?: number | undefined): AsamCollapseActiveName[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
entries
必填：按分支；声明来源：依赖声明。
entries 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): ArrayIterator<[number, AsamCollapseActiveName]>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
keys
必填：按分支；声明来源：依赖声明。
keys 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): ArrayIterator<number>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
values
必填：按分支；声明来源：依赖声明。
values 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): ArrayIterator<AsamCollapseActiveName>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
includes
必填：按分支；声明来源：依赖声明。
includes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(searchElement: AsamCollapseActiveName, fromIndex?: number | undefined): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
flatMap
必填：按分支；声明来源：依赖声明。
flatMap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<U, This = undefined>(callback: (this: This, value: AsamCollapseActiveName, index: number, array: AsamCollapseActiveName[]) => U | readonly U[], thisArg?: This | undefined): U[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
flat
必填：按分支；声明来源：依赖声明。
flat 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
at
必填：按分支；声明来源：依赖声明。
at 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(index: number): AsamCollapseActiveName | undefined
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
[Symbol.iterator]
必填：按分支；声明来源：依赖声明。
[Symbol.iterator] 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(): ArrayIterator<AsamCollapseActiveName>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
[Symbol.unscopables]
必填：按分支；声明来源：依赖声明。
[Symbol.unscopables] 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
AsamCollapseModelValue 公开类型视图
import type { AsamCollapseModelValue, AsamCollapseIconPositionType, AsamCollapseItemExpose, AsamCollapseActiveName, AsamCollapseProps, AsamCollapseExpose, AsamCollapseItemProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCollapseModelValue
type PublicContract = AsamCollapseModelValue;参数与事件说明
modelValue
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
accordion
必填：否；声明来源：上游声明。
accordion 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
expandIconPosition
必填：否；声明来源：上游声明。
expandIconPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："right" / "left"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'right'（2.14.7；源码事实，未作为 ASAM 运行实测）
beforeCollapse
必填：否；声明来源：上游声明。
beforeCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(name: AsamCollapseActiveName): ReturnType<Extract<NonNullable<(AsamCollapsePropsPublic)["beforeCollapse"]>, (...args: never[]) => unknown>>
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCollapsePropsPublic 公开类型视图
import type { AsamCollapsePropsPublic, AsamCollapseProps, AsamCollapseActiveName } from '@asam-ui/ui';
// AsamCollapsePropsPublic
type PublicContract = {
readonly "modelValue"?: (AsamCollapsePropsPublic)["modelValue"];
readonly "accordion"?: boolean | undefined;
readonly "expandIconPosition"?: (AsamCollapsePropsPublic)["expandIconPosition"];
readonly "beforeCollapse"?: (AsamCollapsePropsPublic)["beforeCollapse"];
};