使用场景
将标题、摘要、正文和操作组织为一个独立内容单元。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<AsamCard
v-bind="{
title: '本地草稿',
subtitle: '保存后可继续编辑',
bordered: true,
hoverable: true,
shadow: 'hover'
}"
>
<template #extra>
<AsamButton type="default" native-type="button" @click="count++">保存</AsamButton>
</template>
<p class="example-paragraph">卡片正文由 default 插槽提供。</p>
<template #footer>
<span role="status">已保存 {{ count }} 次</span>
</template>
</AsamCard>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCardBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamCard } 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>
<AsamCard
v-bind="{
title: '本地草稿',
subtitle: '保存后可继续编辑',
bordered: true,
hoverable: true,
shadow: 'hover'
}"
>
<template #extra>
<AsamButton type="default" native-type="button" @click="count++">保存</AsamButton>
</template>
<p class="example-paragraph">卡片正文由 default 插槽提供。</p>
<template #footer>
<span role="status">已保存 {{ count }} 次</span>
</template>
</AsamCard>
</template>
<script setup>
defineOptions({ name: 'AsamCardBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamCard } 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>使用约定
ASAM title/subtitle、extra 插槽、bordered/hoverable 和 bodyClass 提供卡片扩展。 完整说明。
完整使用场景
基础用法
卡片包含标题，内容以及操作区域。
Card 组件由 header body 和 footer组成。 header 和 footer是可选的，其内容取决于一个具名的 slot。
基础用法
<template>
<AsamCard style="max-width: 480px">
<template #header>
<div class="card-header">
<span>卡片名称</span>
</div>
</template>
<p v-for="o in 4" :key="o" class="text item example-paragraph">{{ '列表项 ' + o }}</p>
<template #footer>底部内容</template>
</AsamCard>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCardCapBasicDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamCard style="max-width: 480px">
<template #header>
<div class="card-header">
<span>卡片名称</span>
</div>
</template>
<p v-for="o in 4" :key="o" class="text item example-paragraph">{{ '列表项 ' + o }}</p>
<template #footer>底部内容</template>
</AsamCard>
</template>
<script setup>
defineOptions({ name: 'AsamCardCapBasicDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
简单卡片
卡片可以只有内容区域。
简单卡片
<template>
<AsamCard style="max-width: 480px">
<p v-for="o in 4" :key="o" class="text item example-paragraph">{{ '列表项 ' + o }}</p>
</AsamCard>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCardCapSimpleDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamCard style="max-width: 480px">
<p v-for="o in 4" :key="o" class="text item example-paragraph">{{ '列表项 ' + o }}</p>
</AsamCard>
</template>
<script setup>
defineOptions({ name: 'AsamCardCapSimpleDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
有图片内容的卡片
可配置定义更丰富的内容展示。
配置 body-style 属性来自定义 body 部分的样式。
有图片内容的卡片
<template>
<AsamCard style="max-width: 480px">
<template #header>美味汉堡</template>
<AsamImage
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E"
style="width: 100%"
/>
</AsamCard>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCardCapWithImagesDemo' });
import { AsamImage, AsamCard } from '@asam-ui/ui';
</script><template>
<AsamCard style="max-width: 480px">
<template #header>美味汉堡</template>
<AsamImage
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E"
style="width: 100%"
/>
</AsamCard>
</template>
<script setup>
defineOptions({ name: 'AsamCardCapWithImagesDemo' });
import { AsamImage, AsamCard } from '@asam-ui/ui';
</script>
带有阴影效果的卡片
你可以定义什么时候展示卡片的阴影效果。
通过 shadow 属性设置卡片阴影出现的时机。该属性的值可以是：always、hover 或 never。
带有阴影效果的卡片
<template>
<div class="flex flex-wrap gap-4">
<AsamCard style="width: 480px" shadow="always">始终显示</AsamCard>
<AsamCard style="width: 480px" shadow="hover">悬停</AsamCard>
<AsamCard style="width: 480px" shadow="never">不显示</AsamCard>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCardCapShadowDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-4 {
gap: 1rem;
}
</style><template>
<div class="flex flex-wrap gap-4">
<AsamCard style="width: 480px" shadow="always">始终显示</AsamCard>
<AsamCard style="width: 480px" shadow="hover">悬停</AsamCard>
<AsamCard style="width: 480px" shadow="never">不显示</AsamCard>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCardCapShadowDemo' });
import { AsamCard } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-4 {
gap: 1rem;
}
</style>API
属性 AsamCardProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | — | string | undefined | '' |
subtitle | — | string | undefined | '' |
shadow | 设置阴影显示时机 | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | undefined | — |
bordered | — | boolean | undefined | false |
hoverable | — | boolean | undefined | false |
bodyClass | body 的自定义类名 | string | string[] | undefined | () => [] |
footer | 底部内容，也可以通过 footer 插槽传入 DOM。 | string | undefined | — |
header | 卡片标题内容 | string | undefined | — |
headerClass | card header 的自定义类名 | AsamCardProps["headerClass"] | false |
bodyStyle | body 的 CSS 样式 | (AsamCardProps)["bodyStyle"] | false |
footerClass | footer 的自定义类名 | AsamCardProps["headerClass"] | false |
插槽 AsamCardSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
header | — | (() => unknown) | undefined | — |
extra | — | (() => unknown) | undefined | — |
default | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
类型 AsamCardConfigContext
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
shadow | — | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | undefined | — |
类型 AsamCardInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamCardInstance["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | 查看完整类型{ readonly header?: string | undefined; readonly footer?: string | undefined; readonly bodyStyle?: import("vue").StyleValue; readonly headerClass?: AsamCardProps["headerClass"]; readonly bodyClass?: AsamCardProps["headerClass"]; readonly footerClass?: AsamCardProps["headerClass"]; readonly shadow?: "always" | "hover" | "never" | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps | — |
$attrs | — | AsamCardInstance["$attrs"] | — |
$refs | — | AsamCardInstance["$refs"] | — |
$slots | — | (AsamCardInstance)["$slots"] | — |
$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: string, ...args: any[]) => void | — |
$el | — | any | — |
$options | — | (AsamCardInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamCardInstance)["$nextTick"] | — |
$watch | — | (AsamCardInstance)["$watch"] | — |
footer | — | string | — |
header | — | string | — |
bodyStyle | — | (AsamCardInstance)["bodyStyle"] | — |
headerClass | — | string | false | Record<string, any> | AsamCardProps["headerClass"][] | null | — |
bodyClass | — | string | false | Record<string, any> | AsamCardProps["headerClass"][] | null | — |
footerClass | — | string | false | Record<string, any> | AsamCardProps["headerClass"][] | null | — |
shadow | — | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamCardInstance["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamCardInstance["$router"] | — |
类型 AsamCardPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
footer | — | string | undefined | — |
header | — | string | undefined | — |
headerClass | — | AsamCardProps["headerClass"] | — |
bodyStyle | — | (AsamCardPropsPublic)["bodyStyle"] | — |
bodyClass | — | AsamCardProps["headerClass"] | — |
footerClass | — | AsamCardProps["headerClass"] | — |
shadow | — | enum"hover" | "always" | "never"完整类型：(AsamCardPropsPublic)["shadow"] | — |
用法与契约补充说明
使用约定
ASAM title/subtitle、extra 插槽、bordered/hoverable 和 bodyClass 提供卡片扩展。基础 header/footer、headerClass/footerClass/bodyStyle 与 shadow 保留公开契约。header 插槽可替代默认标题区域，footer 支持正文或插槽；卡片没有控件密度 size。事件由实际内部操作控件提供，不制造卡片业务事件。
关联组件
参数与事件补充说明
参数与事件说明
title
必填：否；声明来源：ASAM 声明。
默认值与来源
''（源码表达式；ASAM 声明）subtitle
必填：否；声明来源：ASAM 声明。
默认值与来源
''（源码表达式；ASAM 声明）shadow
必填：否；声明来源：ASAM 声明。
shadow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
bordered
必填：否；声明来源：ASAM 声明。
bordered 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（源码表达式；ASAM 声明）hoverable
必填：否；声明来源：ASAM 声明。
hoverable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（源码表达式；ASAM 声明）bodyClass
必填：否；声明来源：ASAM 声明。
默认值与来源
() => []（源码表达式；ASAM 声明）footer
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
header
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
headerClass
必填：否；声明来源：上游声明。
headerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
bodyStyle
必填：否；声明来源：上游声明。
bodyStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
footerClass
必填：否；声明来源：上游声明。
footerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCardProps 公开类型视图
import type { AsamCardProps } from '@asam-ui/ui';
// AsamCardProps
type PublicContract = {
"title"?: string | undefined;
"subtitle"?: string | undefined;
"shadow"?: "hover" | "always" | "never" | undefined;
"bordered"?: boolean | undefined;
"hoverable"?: boolean | undefined;
"bodyClass"?: string | string[] | undefined;
"footer"?: string | undefined;
"header"?: string | undefined;
"headerClass"?: AsamCardProps["headerClass"];
"bodyStyle"?: (AsamCardProps)["bodyStyle"];
"footerClass"?: AsamCardProps["headerClass"];
};参数与事件说明
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
extra
必填：否；声明来源：ASAM 声明。
extra 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamCardSlots 公开类型视图
import type { AsamCardSlots } from '@asam-ui/ui';
// AsamCardSlots
type PublicContract = {
"header"?: (() => unknown) | undefined;
"extra"?: (() => unknown) | undefined;
"default"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
};参数与事件说明
shadow
必填：否；声明来源：上游声明。
shadow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCardConfigContext 公开类型视图
import type { AsamCardConfigContext, AsamCardProps } from '@asam-ui/ui';
// AsamCardConfigContext
type PublicContract = {
"shadow"?: "hover" | "always" | "never" | undefined;
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: string, ...args: any[]): 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<(AsamCardInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
footer
必填：是；声明来源：上游声明。
header
必填：是；声明来源：上游声明。
bodyStyle
必填：是；声明来源：上游声明。
bodyStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
headerClass
必填：是；声明来源：上游声明。
headerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
bodyClass
必填：是；声明来源：上游声明。
bodyClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
footerClass
必填：是；声明来源：上游声明。
footerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
shadow
必填：是；声明来源：上游声明。
shadow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamCardInstance["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamCardInstance["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamCardInstance["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamCardInstance["$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<AsamCardInstance["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamCardInstance["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamCardInstance["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamCardInstance["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamCardInstance["$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<AsamCardInstance["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$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<AsamCardInstance["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamCardInstance["footer"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamCardInstance["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamCardInstance["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCardInstance["$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<AsamCardInstance["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamCardInstance["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamCardInstance["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamCardInstance["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamCardInstance["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamCardInstance["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamCardInstance["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamCardInstance["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCardInstance["$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<AsamCardInstance["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamCardInstance["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamCardInstance["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamCardInstance["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamCardInstance["$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
AsamCardInstance 公开类型视图
import type { VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamCardInstance, AsamTableColumnExpose, AsamCardProps, AsamCardListAlign } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCardInstance
type PublicContract = {
"$": AsamCardInstance["$"];
"$data": AsamTableColumnExpose;
"$props": { readonly header?: string | undefined; readonly footer?: string | undefined; readonly bodyStyle?: import("vue").StyleValue; readonly headerClass?: AsamCardProps["headerClass"]; readonly bodyClass?: AsamCardProps["headerClass"]; readonly footerClass?: AsamCardProps["headerClass"]; readonly shadow?: "always" | "hover" | "never" | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
"$attrs": AsamCardInstance["$attrs"];
"$refs": AsamCardInstance["$refs"];
"$slots": (AsamCardInstance)["$slots"];
"$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: string, ...args: any[]) => void;
"$el": any;
"$options": (AsamCardInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamCardInstance)["$nextTick"];
"$watch": (AsamCardInstance)["$watch"];
readonly "footer": string;
readonly "header": string;
readonly "bodyStyle": (AsamCardInstance)["bodyStyle"];
readonly "headerClass": string | false | Record<string, any> | AsamCardProps["headerClass"][] | null;
readonly "bodyClass": string | false | Record<string, any> | AsamCardProps["headerClass"][] | null;
readonly "footerClass": string | false | Record<string, any> | AsamCardProps["headerClass"][] | null;
readonly "shadow": "hover" | "always" | "never";
"$route": AsamCardInstance["$route"];
"$router": AsamCardInstance["$router"];
};参数与事件说明
footer
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
header
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
headerClass
必填：否；声明来源：上游声明。
headerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
bodyStyle
必填：否；声明来源：上游声明。
bodyStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
bodyClass
必填：否；声明来源：上游声明。
bodyClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
footerClass
必填：否；声明来源：上游声明。
footerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
shadow
必填：否；声明来源：上游声明。
shadow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCardPropsPublic 公开类型视图
import type { AsamCardPropsPublic, AsamCardProps } from '@asam-ui/ui';
// AsamCardPropsPublic
type PublicContract = {
readonly "footer"?: string | undefined;
readonly "header"?: string | undefined;
readonly "headerClass"?: AsamCardProps["headerClass"];
readonly "bodyStyle"?: (AsamCardPropsPublic)["bodyStyle"];
readonly "bodyClass"?: AsamCardProps["headerClass"];
readonly "footerClass"?: AsamCardProps["headerClass"];
readonly "shadow"?: (AsamCardPropsPublic)["shadow"];
};