间距容器 AsamSpace

使用场景

统一一组相邻内容的间距、方向与换行。

基础用法与状态

下列示例只使用本入口的实际公开能力。

基础用法与状态

vue

<template>
	<AsamSpace :size="[16, 8]" wrap>
		<AsamButton type="default" native-type="button">操作一</AsamButton>
		<AsamButton type="default" native-type="button">操作二</AsamButton>
		<span>相邻说明</span>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceBasicDemo' });
import { AsamButton, AsamSpace } from '@asam-ui/ui';
</script>

vue

<template>
	<AsamSpace :size="[16, 8]" wrap>
		<AsamButton type="default" native-type="button">操作一</AsamButton>
		<AsamButton type="default" native-type="button">操作二</AsamButton>
		<span>相邻说明</span>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceBasicDemo' });
import { AsamButton, AsamSpace } from '@asam-ui/ui';
</script>

子项尺寸约束

Space 会按子项内容自动计算尺寸。Slider 等依赖父容器宽度或高度的子项，需要明确的容器尺寸或受约束的布局，否则自动尺寸可能无法满足其计算条件。应先为这类子项提供可确定的宽高，再组合间距；下列受约束的滑块示例仍可使用。

使用约定

direction、alignment、wrap、fill、fillRatio、spacer 和 size 按公开参数组合。size 表示间距，可以使用数值、横纵数组或真实间距别名；不能把控件密度 big 当作本入口的间距别名。default 插槽放相邻内容。

完整使用场景

基础用法

最基础的用法，通过这个组件来给组件之间提供统一的间距。

通过间距组件来给多个组件之间提供间距

基础用法

许可

vue

<template>
	<AsamSpace wrap>
		<AsamCard v-for="i in 3" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>

			<div v-for="o in 4" :key="o" class="text item">
				{{ '列表项 ' + o }}
			</div>
		</AsamCard>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapBasicDemo' });
import { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSpace wrap>
		<AsamCard v-for="i in 3" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>

			<div v-for="o in 4" :key="o" class="text item">
				{{ '列表项 ' + o }}
			</div>
		</AsamCard>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapBasicDemo' });
import { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
</script>

垂直布局

使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制.

我们也提供垂直布局方式。

垂直布局

许可

vue

<template>
	<AsamSpace direction="vertical">
		<AsamCard v-for="i in 2" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>

			<div v-for="o in 4" :key="o" class="text item">
				{{ '列表项 ' + o }}
			</div>
		</AsamCard>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapVerticalLayoutDemo' });
import { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSpace direction="vertical">
		<AsamCard v-for="i in 2" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>

			<div v-for="o in 4" :key="o" class="text item">
				{{ '列表项 ' + o }}
			</div>
		</AsamCard>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapVerticalLayoutDemo' });
import { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
</script>

控制间距的大小

通过调整 size 的值来控制间距的大小

你可以使用内置的尺寸 small、default、large 来设置大小，这些尺寸分别对应 8px、12px、16px。默认的间距大小为 small，也就是 8px。

您也可以通过自定义的 size 来控制大小，参见下一个部分。

控制间距的大小

许可

vue

<template>
	<AsamSpace direction="vertical" alignment="start" :size="30">
		<AsamRadioGroup
			:model-value="size"
			@update:model-value="
				(value) => {
					if (value === 'small' || value === 'default' || value === 'large') size = value;
				}
			"
		>
			<AsamRadioItem value="large">大尺寸</AsamRadioItem>
			<AsamRadioItem value="default">默认</AsamRadioItem>
			<AsamRadioItem value="small">小尺寸</AsamRadioItem>
		</AsamRadioGroup>

		<AsamSpace wrap :size="size">
			<!-- prettier-ignore -->
			<AsamCard
				v-for="i in 3"
				:key="i"
				class="box-card"
				style="width: 250px"
			>
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ "列表项 " + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapControlSizeDemo' });
import { AsamSpace, AsamRadioGroup, AsamRadioItem, AsamCard, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamControlSize } from '@asam-ui/ui';

const size = ref<Exclude<AsamControlSize, 'big'>>('default');
</script>

许可

vue

<template>
	<AsamSpace direction="vertical" alignment="start" :size="30">
		<AsamRadioGroup
			:model-value="size"
			@update:model-value="
				(value) => {
					if (value === 'small' || value === 'default' || value === 'large') size = value;
				}
			"
		>
			<AsamRadioItem value="large">大尺寸</AsamRadioItem>
			<AsamRadioItem value="default">默认</AsamRadioItem>
			<AsamRadioItem value="small">小尺寸</AsamRadioItem>
		</AsamRadioGroup>

		<AsamSpace wrap :size="size">
			<!-- prettier-ignore -->
			<AsamCard
				v-for="i in 3"
				:key="i"
				class="box-card"
				style="width: 250px"
			>
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ "列表项 " + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapControlSizeDemo' });
import { AsamSpace, AsamRadioGroup, AsamRadioItem, AsamCard, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const size = ref('default');
</script>

自定义 Size

很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小 (数值类型) 来设置。

自定义 Size

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamSlider
			:model-value="size"
			@update:model-value="
				(value) => {
					if (typeof value === 'number') size = value;
				}
			"
		/>
		<AsamSpace wrap :size="size">
			<!-- prettier-ignore -->
			<AsamCard
			v-for="i in 2"
			:key="i"
			class="box-card"
			style="width: 250px"
		>
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>
			<div v-for="o in 4" :key="o" class="text item">
				{{ "列表项 " + o }}
			</div>
		</AsamCard>
		</AsamSpace>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapCustomizedSizeDemo' });
import { AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

const size = ref(20);
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamSlider
			:model-value="size"
			@update:model-value="
				(value) => {
					if (typeof value === 'number') size = value;
				}
			"
		/>
		<AsamSpace wrap :size="size">
			<!-- prettier-ignore -->
			<AsamCard
			v-for="i in 2"
			:key="i"
			class="box-card"
			style="width: 250px"
		>
			<template #header>
				<div class="card-header">
					<span>卡片名称</span>
					<AsamButton type="default" class="button" text>操作按钮</AsamButton>
				</div>
			</template>
			<div v-for="o in 4" :key="o" class="text item">
				{{ "列表项 " + o }}
			</div>
		</AsamCard>
		</AsamSpace>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapCustomizedSizeDemo' });
import { AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const size = ref(20);
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

自动换行

在 **水平 (horizontal) ** 模式下，通过使用 wrap（布尔类型）来控制自动换行行为。

利用 wrap 属性控制换行

自动换行

许可

vue

<template>
	<AsamSpace wrap>
		<div v-for="i in 20" :key="i">
			<AsamButton type="default" text> 文字按钮 </AsamButton>
		</div>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapAutoWrappingDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSpace wrap>
		<div v-for="i in 20" :key="i">
			<AsamButton type="default" text> 文字按钮 </AsamButton>
		</div>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapAutoWrappingDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';
</script>

字母数字类型分隔符

下列完整示例包含状态与交互，源码提供 TS 和 JS 两种版本。

字母数字类型分隔符

许可

vue

<template>
	<AsamSpace :size="size" spacer="|">
		<div v-for="i in 2" :key="i">
			<AsamButton type="default"> 按钮 {{ i }} </AsamButton>
		</div>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapLiteralTypeSpacerDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

const size = ref(10);
</script>

许可

vue

<template>
	<AsamSpace :size="size" spacer="|">
		<div v-for="i in 2" :key="i">
			<AsamButton type="default"> 按钮 {{ i }} </AsamButton>
		</div>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapLiteralTypeSpacerDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const size = ref(10);
</script>

分隔符还可以是 VNode 类型

下列完整示例包含状态与交互，源码提供 TS 和 JS 两种版本。

分隔符还可以是 VNode 类型

许可

vue

<template>
	<AsamSpace :size="size" :spacer="spacer">
		<div v-for="i in 2" :key="i">
			<AsamButton type="default"> 按钮 {{ i }} </AsamButton>
		</div>
	</AsamSpace>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapVnodeTypeSpacerDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';

import { h, ref } from 'vue';
import { AsamDivider } from '@asam-ui/ui';

const size = ref(10);
const spacer = h(AsamDivider, { direction: 'vertical' });
</script>

许可

vue

<template>
	<AsamSpace :size="size" :spacer="spacer">
		<div v-for="i in 2" :key="i">
			<AsamButton type="default"> 按钮 {{ i }} </AsamButton>
		</div>
	</AsamSpace>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapVnodeTypeSpacerDemo' });
import { AsamSpace, AsamButton } from '@asam-ui/ui';
import { h, ref } from 'vue';
import { AsamDivider } from '@asam-ui/ui';
const size = ref(10);
const spacer = h(AsamDivider, { direction: 'vertical' });
</script>

对齐方式

设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 align-items 一致。

使用 alignment 属性来对齐

对齐方式

许可

vue

<template>
	<div class="alignment-container">
		<AsamSpace>
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>

				body
			</AsamCard>
		</AsamSpace>
	</div>
	<div class="alignment-container">
		<AsamSpace alignment="flex-start">
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>
				body
			</AsamCard>
		</AsamSpace>
	</div>
	<div class="alignment-container">
		<AsamSpace alignment="flex-end">
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>
				body
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapAlignmentDemo' });
import { AsamSpace, AsamButton, AsamCard } from '@asam-ui/ui';
</script>

<style>
.alignment-container {
	width: 240px;
	margin-bottom: 20px;
	padding: 8px;
	border: 1px solid var(--el-border-color);
}
</style>

许可

vue

<template>
	<div class="alignment-container">
		<AsamSpace>
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>

				body
			</AsamCard>
		</AsamSpace>
	</div>
	<div class="alignment-container">
		<AsamSpace alignment="flex-start">
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>
				body
			</AsamCard>
		</AsamSpace>
	</div>
	<div class="alignment-container">
		<AsamSpace alignment="flex-end">
			string
			<AsamButton type="default">按钮</AsamButton>
			<AsamCard>
				<template #header> header </template>
				body
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapAlignmentDemo' });
import { AsamSpace, AsamButton, AsamCard } from '@asam-ui/ui';
</script>

<style>
.alignment-container {
	width: 240px;
	margin-bottom: 20px;
	padding: 8px;
	border: 1px solid var(--el-border-color);
}
</style>

填充容器

通过 fill**（布尔类型）**参数，您可以控制子节点是否自动填充容器。

下面的例子中，当设置为 fill 时，子节点的宽度会自动适配容器的宽度。

用 fill 属性让子节点自动填充容器

填充容器

许可

vue

<template>
	<div>
		<div style="margin-bottom: 15px">
			填充：
			<AsamSwitch
				:model-value="fill"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') fill = value;
					}
				"
			/>
		</div>
		<AsamSpace :fill="fill" wrap>
			<AsamCard v-for="i in 3" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ '列表项 ' + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapFillDemo' });
import { AsamSwitch, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

const fill = ref(true);
</script>

许可

vue

<template>
	<div>
		<div style="margin-bottom: 15px">
			填充：
			<AsamSwitch
				:model-value="fill"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') fill = value;
					}
				"
			/>
		</div>
		<AsamSpace :fill="fill" wrap>
			<AsamCard v-for="i in 3" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ '列表项 ' + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapFillDemo' });
import { AsamSwitch, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const fill = ref(true);
</script>

自定义填充比例

也可以使用 fillRatio 参数，自定义填充的比例，默认值为 100，代表基于父容器宽度的 100% 进行填充

需要注意的是，水平布局和垂直布局的表现形式稍有不同，具体的效果可以查看下面的例子

用 fillRatio 自定义填充比例

自定义填充比例

许可

vue

<template>
	<div>
		<div style="margin-bottom: 15px">
			方向：
			<AsamRadioItem
				:model-value="direction"
				value="horizontal"
				@update:model-value="
					(value) => {
						if (value === 'horizontal' || value === 'vertical') direction = value;
					}
				"
			>
				horizontal
			</AsamRadioItem>
			<AsamRadioItem
				:model-value="direction"
				value="vertical"
				@update:model-value="
					(value) => {
						if (value === 'horizontal' || value === 'vertical') direction = value;
					}
				"
			>
				vertical
			</AsamRadioItem>
		</div>
		<div style="margin-bottom: 15px">
			填充比例：<AsamSlider
				:model-value="fillRatio"
				@update:model-value="
					(value) => {
						if (typeof value === 'number') fillRatio = value;
					}
				"
			/>
		</div>
		<!-- prettier-ignore -->
		<AsamSpace
			fill
			wrap
			:fill-ratio="fillRatio"
			:direction="direction"
			style="width: 100%"
		>
			<AsamCard v-for="i in 5" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ "列表项 " + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSpaceCapFillRatioDemo' });
import { AsamRadioItem, AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamSpaceInstance } from '@asam-ui/ui';

const direction = ref<AsamSpaceInstance['direction']>('horizontal');
const fillRatio = ref(30);
</script>

许可

vue

<template>
	<div>
		<div style="margin-bottom: 15px">
			方向：
			<AsamRadioItem
				:model-value="direction"
				value="horizontal"
				@update:model-value="
					(value) => {
						if (value === 'horizontal' || value === 'vertical') direction = value;
					}
				"
			>
				horizontal
			</AsamRadioItem>
			<AsamRadioItem
				:model-value="direction"
				value="vertical"
				@update:model-value="
					(value) => {
						if (value === 'horizontal' || value === 'vertical') direction = value;
					}
				"
			>
				vertical
			</AsamRadioItem>
		</div>
		<div style="margin-bottom: 15px">
			填充比例：<AsamSlider
				:model-value="fillRatio"
				@update:model-value="
					(value) => {
						if (typeof value === 'number') fillRatio = value;
					}
				"
			/>
		</div>
		<!-- prettier-ignore -->
		<AsamSpace
			fill
			wrap
			:fill-ratio="fillRatio"
			:direction="direction"
			style="width: 100%"
		>
			<AsamCard v-for="i in 5" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>卡片名称</span>
						<AsamButton type="default" class="button" text>操作按钮</AsamButton>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ "列表项 " + o }}
				</div>
			</AsamCard>
		</AsamSpace>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSpaceCapFillRatioDemo' });
import { AsamRadioItem, AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const direction = ref('horizontal');
const fillRatio = ref(30);
</script>

API

属性 `AsamSpaceProps`

属性名	说明	类型	默认值
`fill`	子元素是否填充父容器	`boolean \| undefined`	`false`
`class`	类名。	`AsamSpaceProps["class"]`	`""`
`style`	额外样式	`(AsamSpaceProps)["style"]`	`""`
`direction`	排列的方向	`enum"horizontal" \| "vertical"`完整类型：`(AsamSpaceProps)["direction"]`	`"horizontal"`
`wrap`	设置是否自动折行	`boolean \| undefined`	`false`
`alignment`	对齐的方式	`enum"start" \| "center" \| "stretch" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "end" \| "flex-end" \| "flex-start" \| "self-end" \| "self-start" \| "anchor-center" \| "baseline" \| "normal"`完整类型：`(AsamSpaceProps)["alignment"]`	`"center"`
`spacer`	间隔符	`(AsamSpaceProps)["spacer"]`	`null`
`fillRatio`	填充父容器的比例	`number \| undefined`	`100`
`size`	间隔大小	`enum"" \| "large" \| "default" \| "small"`完整类型：`(AsamSpaceProps)["size"]`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamSpaceProps)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamSpaceProps)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamSpaceProps)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamSpaceProps)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamSpaceProps)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamSpaceProps)["onVnodeUnmounted"]`	—
`prefixCls`	给 space-items 的类名前缀	`string \| undefined`	—

实例方法与状态 `AsamSpaceExpose`

属性名	说明	类型	默认值
`$`	—	`AsamSpaceExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamSpaceProps`	—
`$attrs`	—	`AsamSpaceExpose["$attrs"]`	—
`$refs`	—	`AsamSpaceExpose["$refs"]`	—
`$slots`	—	`AsamAvatarGroupSlots`	—
`$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`	—	`(AsamSpaceExpose)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamSpaceExpose)["$nextTick"]`	—
`$watch`	—	`(AsamSpaceExpose)["$watch"]`	—
`fill`	—	`boolean`	—
`class`	—	`AsamSpaceProps["class"]`	—
`style`	—	`(AsamSpaceExpose)["style"]`	—
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`(AsamSpaceExpose)["direction"]`	—
`wrap`	—	`boolean`	—
`alignment`	—	`enum"start" \| "center" \| "stretch" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "end" \| "flex-end" \| "flex-start" \| "self-end" \| "self-start" \| "anchor-center" \| "baseline" \| "normal"`完整类型：`(AsamSpaceExpose)["alignment"]`	—
`spacer`	—	`(AsamSpaceExpose)["spacer"]`	—
`fillRatio`	—	`number`	—
`size`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`(AsamSpaceExpose)["size"]`	—
`prefixCls`	—	`string \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamSpaceExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamSpaceExpose["$router"]`	—

类型 `AsamSpaceInstance`

属性名	说明	类型	默认值
`$`	—	`AsamSpaceExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamSpaceProps`	—
`$attrs`	—	`AsamSpaceExpose["$attrs"]`	—
`$refs`	—	`AsamSpaceExpose["$refs"]`	—
`$slots`	—	`AsamAvatarGroupSlots`	—
`$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`	—	`(AsamSpaceInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamSpaceInstance)["$nextTick"]`	—
`$watch`	—	`(AsamSpaceInstance)["$watch"]`	—
`fill`	—	`boolean`	—
`class`	—	`AsamSpaceProps["class"]`	—
`style`	—	`(AsamSpaceInstance)["style"]`	—
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`(AsamSpaceInstance)["direction"]`	—
`wrap`	—	`boolean`	—
`alignment`	—	`enum"start" \| "center" \| "stretch" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "end" \| "flex-end" \| "flex-start" \| "self-end" \| "self-start" \| "anchor-center" \| "baseline" \| "normal"`完整类型：`(AsamSpaceInstance)["alignment"]`	—
`spacer`	—	`(AsamSpaceInstance)["spacer"]`	—
`fillRatio`	—	`number`	—
`size`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`(AsamSpaceInstance)["size"]`	—
`prefixCls`	—	`string \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamSpaceExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamSpaceExpose["$router"]`	—

插槽 `AsamSpaceSlots`

属性名	说明	类型	默认值
`default`	参与间距布局的内容。	`Slot \| undefined`	—

类型 `AsamSpaceItemInstance`

属性名	说明	类型	默认值
`$`	—	`AsamSpaceExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`Partial<{}> & Omit<{ readonly prefixCls?: string \| undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>`	—
`$attrs`	—	`AsamSpaceExpose["$attrs"]`	—
`$refs`	—	`AsamSpaceExpose["$refs"]`	—
`$slots`	—	`AsamAvatarGroupSlots`	—
`$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`	—	`(AsamSpaceItemInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamSpaceItemInstance)["$nextTick"]`	—
`$watch`	—	`(AsamSpaceItemInstance)["$watch"]`	—
`prefixCls`	—	`string \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamSpaceExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamSpaceExpose["$router"]`	—

类型 `AsamSpaceItemProps`

属性名	说明	类型	默认值
`prefixCls`	—	`string \| undefined`	—

类型 `AsamSpaceItemPropsPublic`

属性名	说明	类型	默认值
`prefixCls`	—	`string \| undefined`	—

类型 `AsamSpacePropsPublic`

属性名	说明	类型	默认值
`style`	—	`(AsamSpacePropsPublic)["style"]`	—
`size`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`(AsamSpacePropsPublic)["size"]`	—
`fill`	—	`boolean \| undefined`	—
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`(AsamSpacePropsPublic)["direction"]`	—
`class`	—	`AsamSpaceProps["class"]`	—
`alignment`	—	`enum"start" \| "center" \| "stretch" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "end" \| "flex-end" \| "flex-start" \| "self-end" \| "self-start" \| "anchor-center" \| "baseline" \| "normal"`完整类型：`(AsamSpacePropsPublic)["alignment"]`	—
`prefixCls`	—	`string \| undefined`	—
`spacer`	—	`(AsamSpacePropsPublic)["spacer"]`	—
`wrap`	—	`boolean \| undefined`	—
`fillRatio`	—	`number \| undefined`	—

参数与事件补充说明

公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。

参数与事件说明

`fill`

必填：否；声明来源：上游声明。

fill 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`class`

必填：否；声明来源：上游声明。

class 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`style`

必填：否；声明来源：上游声明。

style 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`direction`

必填：否；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

默认值与来源

"horizontal"（已安装运行时；已安装组件）

固定上游文档默认：horizontal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`wrap`

必填：否；声明来源：上游声明。

wrap 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`alignment`

必填：否；声明来源：上游声明。

alignment 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："start" / "center" / "stretch" / "-moz-initial" / "inherit" / "initial" / "revert" / "revert-layer" / "unset" / "end" / "flex-end" / "flex-start" / "self-end" / "self-start" / "anchor-center" / "baseline" / "normal"

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

"center"（已安装运行时；已安装组件）

固定上游文档默认：center（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'center'（2.14.7；源码事实，未作为 ASAM 运行实测）

`spacer`

必填：否；声明来源：上游声明。

spacer 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

null（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：null（2.14.7；源码事实，未作为 ASAM 运行实测）

`fillRatio`

必填：否；声明来源：上游声明。

默认值与来源

100（已安装运行时；已安装组件）

固定上游文档默认：100（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：100（2.14.7；源码事实，未作为 ASAM 运行实测）

`size`

必填：否；声明来源：上游声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "large" / "default" / "small"

默认值与来源

未知 / 未声明

固定上游文档默认：small（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`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

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamSpaceProps 公开类型视图

import type { VNodeChild, VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamSpaceProps, AsamSpaceExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamSpaceProps
type PublicContract = {
	readonly "fill"?: boolean | undefined;
	readonly "class"?: AsamSpaceProps["class"];
	readonly "style"?: (AsamSpaceProps)["style"];
	readonly "direction"?: (AsamSpaceProps)["direction"];
	readonly "wrap"?: boolean | undefined;
	readonly "alignment"?: (AsamSpaceProps)["alignment"];
	readonly "spacer"?: (AsamSpaceProps)["spacer"];
	readonly "fillRatio"?: number | undefined;
	readonly "size"?: (AsamSpaceProps)["size"];
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamSpaceProps)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamSpaceProps)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamSpaceProps)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamSpaceProps)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamSpaceProps)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamSpaceProps)["onVnodeUnmounted"];
	readonly "prefixCls"?: string | undefined;
};

完整的上游实例，包含全部公开方法与响应式状态。

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

$props 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

$slots 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: string, ...args: any[]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

$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<(AsamSpaceExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`fill`

必填：是；声明来源：上游声明。

fill 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`class`

必填：是；声明来源：上游声明。

class 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`style`

必填：是；声明来源：上游声明。

style 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`direction`

必填：是；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`wrap`

必填：是；声明来源：上游声明。

wrap 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`alignment`

必填：是；声明来源：上游声明。

alignment 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'center'（2.14.7；源码事实，未作为 ASAM 运行实测）

`spacer`

必填：是；声明来源：上游声明。

spacer 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：null（2.14.7；源码事实，未作为 ASAM 运行实测）

`fillRatio`

必填：是；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：100（2.14.7；源码事实，未作为 ASAM 运行实测）

`size`

必填：否；声明来源：上游声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "large" / "default" / "small"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamSpaceExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamSpaceExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamSpaceExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamSpaceExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamSpaceExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamSpaceExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamSpaceExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamSpaceExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamSpaceExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamSpaceExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamSpaceExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamSpaceExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamSpaceExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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

AsamSpaceExpose 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, PropType, VNode, RendererNode, RendererElement, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, VNodeChild, ShallowRef, App } from 'vue';
import type { AsamSpaceExpose, AsamTableColumnExpose, AsamSpaceProps, AsamAvatarGroupSlots } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamSpaceExpose
type PublicContract = {
	"$": AsamSpaceExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamSpaceProps;
	"$attrs": AsamSpaceExpose["$attrs"];
	"$refs": AsamSpaceExpose["$refs"];
	"$slots": AsamAvatarGroupSlots;
	"$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": (AsamSpaceExpose)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamSpaceExpose)["$nextTick"];
	"$watch": (AsamSpaceExpose)["$watch"];
	readonly "fill": boolean;
	readonly "class": AsamSpaceProps["class"];
	readonly "style": (AsamSpaceExpose)["style"];
	readonly "direction": (AsamSpaceExpose)["direction"];
	readonly "wrap": boolean;
	readonly "alignment": (AsamSpaceExpose)["alignment"];
	readonly "spacer": (AsamSpaceExpose)["spacer"];
	readonly "fillRatio": number;
	readonly "size"?: (AsamSpaceExpose)["size"];
	readonly "prefixCls"?: string | undefined;
	"$route": AsamSpaceExpose["$route"];
	"$router": AsamSpaceExpose["$router"];
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

$props 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

$slots 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: string, ...args: any[]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

$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<(AsamSpaceInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`fill`

必填：是；声明来源：上游声明。

fill 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`class`

必填：是；声明来源：上游声明。

class 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`style`

必填：是；声明来源：上游声明。

style 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`direction`

必填：是；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`wrap`

必填：是；声明来源：上游声明。

wrap 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`alignment`

必填：是；声明来源：上游声明。

alignment 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'center'（2.14.7；源码事实，未作为 ASAM 运行实测）

`spacer`

必填：是；声明来源：上游声明。

spacer 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：null（2.14.7；源码事实，未作为 ASAM 运行实测）

`fillRatio`

必填：是；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：100（2.14.7；源码事实，未作为 ASAM 运行实测）

`size`

必填：否；声明来源：上游声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "large" / "default" / "small"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamSpaceExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamSpaceExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamSpaceExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamSpaceExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamSpaceExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamSpaceExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamSpaceExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamSpaceExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamSpaceExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamSpaceExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamSpaceExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamSpaceExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamSpaceExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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

AsamSpaceInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, PropType, VNode, RendererNode, RendererElement, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, VNodeChild, ShallowRef, App } from 'vue';
import type { AsamSpaceInstance, AsamSpaceExpose, AsamTableColumnExpose, AsamSpaceProps, AsamAvatarGroupSlots } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamSpaceInstance
type PublicContract = {
	"$": AsamSpaceExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamSpaceProps;
	"$attrs": AsamSpaceExpose["$attrs"];
	"$refs": AsamSpaceExpose["$refs"];
	"$slots": AsamAvatarGroupSlots;
	"$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": (AsamSpaceInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamSpaceInstance)["$nextTick"];
	"$watch": (AsamSpaceInstance)["$watch"];
	readonly "fill": boolean;
	readonly "class": AsamSpaceProps["class"];
	readonly "style": (AsamSpaceInstance)["style"];
	readonly "direction": (AsamSpaceInstance)["direction"];
	readonly "wrap": boolean;
	readonly "alignment": (AsamSpaceInstance)["alignment"];
	readonly "spacer": (AsamSpaceInstance)["spacer"];
	readonly "fillRatio": number;
	readonly "size"?: (AsamSpaceInstance)["size"];
	readonly "prefixCls"?: string | undefined;
	"$route": AsamSpaceExpose["$route"];
	"$router": AsamSpaceExpose["$router"];
};

作用域插槽保留上游实例契约。

参数与事件说明

`default`

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(...args: any[]): VNode<RendererNode, RendererElement, { [key: string]: any; }>[]

AsamSpaceSlots 公开类型视图

import type { Slot, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamSpaceSlots } from '@asam-ui/ui';

// AsamSpaceSlots
type PublicContract = {
	"default"?: Slot | undefined;
	readonly [key: string]: Slot<any> | undefined;
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

$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<(AsamSpaceItemInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamSpaceExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamSpaceExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamSpaceExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamSpaceExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamSpaceExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamSpaceExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamSpaceExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamSpaceExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamSpaceExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamSpaceExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamSpaceExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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<AsamSpaceExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamSpaceExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamSpaceExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamSpaceExpose["$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

AsamSpaceItemInstance 公开类型视图

import type { VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, PropType, VNode, RendererNode, RendererElement, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamSpaceItemInstance, AsamSpaceExpose, AsamTableColumnExpose, AsamAvatarGroupSlots, AsamSpaceProps } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamSpaceItemInstance
type PublicContract = {
	"$": AsamSpaceExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": Partial<{}> & Omit<{ readonly prefixCls?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
	"$attrs": AsamSpaceExpose["$attrs"];
	"$refs": AsamSpaceExpose["$refs"];
	"$slots": AsamAvatarGroupSlots;
	"$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": (AsamSpaceItemInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamSpaceItemInstance)["$nextTick"];
	"$watch": (AsamSpaceItemInstance)["$watch"];
	readonly "prefixCls"?: string | undefined;
	"$route": AsamSpaceExpose["$route"];
	"$router": AsamSpaceExpose["$router"];
};

参数与事件说明

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamSpaceItemProps 公开类型视图

import type { AsamSpaceItemProps, AsamSpaceProps } from '@asam-ui/ui';

// AsamSpaceItemProps
type PublicContract = {
	readonly "prefixCls"?: string | undefined;
};

参数与事件说明

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamSpaceItemPropsPublic 公开类型视图

import type { AsamSpaceItemPropsPublic, AsamSpaceProps } from '@asam-ui/ui';

// AsamSpaceItemPropsPublic
type PublicContract = {
	readonly "prefixCls"?: string | undefined;
};

参数与事件说明

`style`

必填：否；声明来源：上游声明。

style 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`size`

必填：否；声明来源：上游声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "large" / "default" / "small"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`fill`

必填：否；声明来源：上游声明。

fill 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`direction`

必填：否；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`class`

必填：否；声明来源：上游声明。

class 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`alignment`

必填：否；声明来源：上游声明。

alignment 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'center'（2.14.7；源码事实，未作为 ASAM 运行实测）

`prefixCls`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`spacer`

必填：否；声明来源：上游声明。

spacer 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：null（2.14.7；源码事实，未作为 ASAM 运行实测）

`wrap`

必填：否；声明来源：上游声明。

wrap 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`fillRatio`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：100（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamSpacePropsPublic 公开类型视图

import type { VNodeChild } from 'vue';
import type { AsamSpacePropsPublic, AsamSpaceProps } from '@asam-ui/ui';

// AsamSpacePropsPublic
type PublicContract = {
	readonly "style"?: (AsamSpacePropsPublic)["style"];
	readonly "size"?: (AsamSpacePropsPublic)["size"];
	readonly "fill"?: boolean | undefined;
	readonly "direction"?: (AsamSpacePropsPublic)["direction"];
	readonly "class"?: AsamSpaceProps["class"];
	readonly "alignment"?: (AsamSpacePropsPublic)["alignment"];
	readonly "prefixCls"?: string | undefined;
	readonly "spacer"?: (AsamSpacePropsPublic)["spacer"];
	readonly "wrap"?: boolean | undefined;
	readonly "fillRatio"?: number | undefined;
};

间距容器 AsamSpace

使用场景 ​

基础用法与状态 ​

基础用法与状态

子项尺寸约束 ​

使用约定 ​

完整使用场景 ​

基础用法 ​

基础用法

垂直布局 ​

垂直布局

控制间距的大小 ​

控制间距的大小

自定义 Size ​

自定义 Size

自动换行 ​

自动换行

字母数字类型分隔符 ​

字母数字类型分隔符

分隔符还可以是 VNode 类型 ​

分隔符还可以是 VNode 类型

对齐方式 ​

对齐方式

填充容器 ​

填充容器

自定义填充比例 ​

自定义填充比例

API

属性 AsamSpaceProps

实例方法与状态 AsamSpaceExpose

类型 AsamSpaceInstance

插槽 AsamSpaceSlots

类型 AsamSpaceItemInstance

类型 AsamSpaceItemProps

类型 AsamSpaceItemPropsPublic

类型 AsamSpacePropsPublic

关联组件

参数与事件说明

fill

默认值与来源

class

默认值与来源

style

默认值与来源

direction

默认值与来源

wrap

默认值与来源

alignment

默认值与来源

spacer

默认值与来源

fillRatio

默认值与来源

size

默认值与来源

key

ref

ref_for

ref_key

onVnodeBeforeMount

onVnodeMounted

onVnodeBeforeUpdate

onVnodeUpdated

onVnodeBeforeUnmount

onVnodeUnmounted

prefixCls

默认值与来源

参数与事件说明

$

$data

$props

$attrs

$refs

$slots

$root

$parent

$host

$emit

$el

使用场景

基础用法与状态

子项尺寸约束

使用约定

完整使用场景

基础用法

垂直布局

控制间距的大小

自定义 Size

自动换行

字母数字类型分隔符

分隔符还可以是 VNode 类型

对齐方式

填充容器

自定义填充比例

属性 `AsamSpaceProps`

实例方法与状态 `AsamSpaceExpose`

类型 `AsamSpaceInstance`

插槽 `AsamSpaceSlots`

类型 `AsamSpaceItemInstance`

类型 `AsamSpaceItemProps`

类型 `AsamSpaceItemPropsPublic`

类型 `AsamSpacePropsPublic`

`fill`

`class`

`style`

`direction`

`wrap`

`alignment`

`spacer`

`fillRatio`

`size`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`prefixCls`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`fill`

`class`

`style`

`direction`

`wrap`

`alignment`

`spacer`

`fillRatio`

`size`

`prefixCls`

`$route`

`$router`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`