使用场景
让相邻面板在容器内调整占用空间。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<AsamSplitter class="split">
<AsamSplitterPanel
:size="first"
:min="80"
collapsible
@update:size="
(value) => {
if (typeof value === 'number') first = value;
}
"
>
<div class="panel">拖动分隔条调整左侧</div>
</AsamSplitterPanel>
<AsamSplitterPanel :min="80">
<div class="panel">另一面板</div>
</AsamSplitterPanel>
</AsamSplitter>
<p class="example-paragraph" role="status">左侧尺寸：{{ first }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterBasicDemo' });
import { ref } from 'vue';
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const first = ref(160);
</script>
<style scoped>
.panel {
padding: var(--asam-space-md);
background: var(--asam-color-surface);
border: 1px solid var(--asam-color-border);
}
.split {
height: 220px;
width: 100%;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamSplitter class="split">
<AsamSplitterPanel
:size="first"
:min="80"
collapsible
@update:size="
(value) => {
if (typeof value === 'number') first = value;
}
"
>
<div class="panel">拖动分隔条调整左侧</div>
</AsamSplitterPanel>
<AsamSplitterPanel :min="80">
<div class="panel">另一面板</div>
</AsamSplitterPanel>
</AsamSplitter>
<p class="example-paragraph" role="status">左侧尺寸：{{ first }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterBasicDemo' });
import { ref } from 'vue';
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const first = ref(160);
</script>
<style scoped>
.panel {
padding: var(--asam-space-md);
background: var(--asam-color-surface);
border: 1px solid var(--asam-color-border);
}
.split {
height: 220px;
width: 100%;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
layout 控制 horizontal/vertical，lazy 控制调整反馈时机；resizeStart/resize/resizeEnd/collapse 提供真实布局变更。default 插槽放 AsamSplitterPanel；宿主必须给出可计算的宽高。
完整使用场景
基础用法
最基本的用法，如果未传入默认尺寸，将自动平均分配。
基础用法
<template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter>
<AsamSplitterPanel size="30%">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel :min="200">
<div class="demo-panel">2</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapBasicDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style><template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter>
<AsamSplitterPanel size="30%">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel :min="200">
<div class="demo-panel">2</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapBasicDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
垂直布局
使用垂直方向。
垂直布局
<template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter layout="vertical">
<AsamSplitterPanel>
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">2</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapVerticalDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style><template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter layout="vertical">
<AsamSplitterPanel>
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">2</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapVerticalDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
可折叠
配置 collapsible 可提供快速收缩功能。你可以使用 min 属性来防止折叠后通过拖拽进行扩展。
可折叠
<template>
<AsamSwitch
:model-value="isCollapsible"
active-text="enable"
inactive-text="disable"
inline-prompt
class="mb-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') isCollapsible = value;
}
"
/>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter>
<AsamSplitterPanel :collapsible="isCollapsible" min="50">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">2</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<AsamSplitter layout="vertical">
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">4</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">5</div>
</AsamSplitterPanel>
</AsamSplitter>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapCollapsibleDemo' });
import { AsamSwitch, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
import { ref } from 'vue';
const isCollapsible = ref(true);
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mb-2 {
margin-bottom: 0.5rem;
}
</style><template>
<AsamSwitch
:model-value="isCollapsible"
active-text="enable"
inactive-text="disable"
inline-prompt
class="mb-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') isCollapsible = value;
}
"
/>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter>
<AsamSplitterPanel :collapsible="isCollapsible" min="50">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">2</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<AsamSplitter layout="vertical">
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">4</div>
</AsamSplitterPanel>
<AsamSplitterPanel :collapsible="isCollapsible">
<div class="demo-panel">5</div>
</AsamSplitterPanel>
</AsamSplitter>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapCollapsibleDemo' });
import { AsamSwitch, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
import { ref } from 'vue';
const isCollapsible = ref(true);
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mb-2 {
margin-bottom: 0.5rem;
}
</style>
禁用拖动
当任一面板禁用 resizable 时，拖拽功能将被禁用。
禁用拖动
<template>
<AsamCheckboxItem v-model="resizable">允许调整第一面板</AsamCheckboxItem>
<div style="height: 200px; width: 100%">
<AsamSplitter>
<AsamSplitterPanel :resizable="resizable" :size="'40%'">第一面板</AsamSplitterPanel
><AsamSplitterPanel>第二面板</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapDisableDragDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const resizable = ref(false);
</script><template>
<AsamCheckboxItem v-model="resizable">允许调整第一面板</AsamCheckboxItem>
<div style="height: 200px; width: 100%">
<AsamSplitter>
<AsamSplitterPanel :resizable="resizable" :size="'40%'">第一面板</AsamSplitterPanel
><AsamSplitterPanel>第二面板</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapDisableDragDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const resizable = ref(false);
</script>
面板大小
v-model:size 可以获取面板的大小。
面板大小
<template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter
@resize-start="handleResizeStart"
@resize-end="handleResizeEnd"
@resize="handleResize"
>
<AsamSplitterPanel>
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel
:size="size"
:max="200"
:min="50"
@update:size="
(value) => {
if (typeof value === 'number') size = value;
}
"
>
<div class="demo-panel">{{ size }}px</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapSizeDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
import { ref } from 'vue';
const size = ref(100);
const handleResizeStart = (index: number, sizes: number[]) => {
console.log('resizeStart', index, sizes);
};
const handleResize = (index: number, sizes: number[]) => {
console.log('resize', index, sizes);
};
const handleResizeEnd = (index: number, sizes: number[]) => {
console.log('resizeEnd', index, sizes);
};
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style><template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter
@resize-start="handleResizeStart"
@resize-end="handleResizeEnd"
@resize="handleResize"
>
<AsamSplitterPanel>
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel
:size="size"
:max="200"
:min="50"
@update:size="
(value) => {
if (typeof value === 'number') size = value;
}
"
>
<div class="demo-panel">{{ size }}px</div>
</AsamSplitterPanel>
<AsamSplitterPanel>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapSizeDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
import { ref } from 'vue';
const size = ref(100);
const handleResizeStart = (index, sizes) => {
console.log('resizeStart', index, sizes);
};
const handleResize = (index, sizes) => {
console.log('resize', index, sizes);
};
const handleResizeEnd = (index, sizes) => {
console.log('resizeEnd', index, sizes);
};
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
延迟2.11.0
当启用lazy时，面板大小将不会在拖动时实时更新，只能在拖动结束后更新。
延迟2.11.0
<template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter lazy>
<AsamSplitterPanel collapsible min="50">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel collapsible>
<div class="demo-panel">2</div>
</AsamSplitterPanel>
<AsamSplitterPanel collapsible>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSplitterCapLazyDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style><template>
<div style="height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px">
<AsamSplitter lazy>
<AsamSplitterPanel collapsible min="50">
<div class="demo-panel">1</div>
</AsamSplitterPanel>
<AsamSplitterPanel collapsible>
<div class="demo-panel">2</div>
</AsamSplitterPanel>
<AsamSplitterPanel collapsible>
<div class="demo-panel">3</div>
</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterCapLazyDemo' });
import { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
</script>
<style scoped>
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>零尺寸初始化与恢复
父容器初始化宽高为零时不产生 NaN 或无限尺寸；后续容器恢复尺寸后按实际布局重算。拖动和折叠仍受 panel 的 resizable、min/max、collapsible 配置控制。
零尺寸初始化与恢复
<template>
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换容器尺寸</AsamButton
>
<div
:style="{
width: visible ? '400px' : '0px',
height: visible ? '200px' : '0px',
overflow: 'hidden'
}"
v-bind="domDataAttrs('data-splitter-host')"
>
<AsamSplitter>
<AsamSplitterPanel :size="'50%'" :min="'20%'" collapsible>左侧</AsamSplitterPanel
><AsamSplitterPanel>右侧</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamSplitterZeroSizeDemo' });
import { ref } from 'vue';
import { AsamButton, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const visible = ref(false);
type DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;
const domDataAttrs = (
name: `data-${string}`,
value: string | number | boolean | null | undefined = ''
): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({
class: 'ui032-data-marker',
[name]: value
});
</script><template>
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换容器尺寸</AsamButton
>
<div
:style="{
width: visible ? '400px' : '0px',
height: visible ? '200px' : '0px',
overflow: 'hidden'
}"
v-bind="domDataAttrs('data-splitter-host')"
>
<AsamSplitter>
<AsamSplitterPanel :size="'50%'" :min="'20%'" collapsible>左侧</AsamSplitterPanel
><AsamSplitterPanel>右侧</AsamSplitterPanel>
</AsamSplitter>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSplitterZeroSizeDemo' });
import { ref } from 'vue';
import { AsamButton, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';
const visible = ref(false);
const domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });
</script>API
属性 AsamSplitterProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
layout | 分隔面板的布局方向 | enum"horizontal" | "vertical"完整类型：AsamSplitterExpose["layout"] | undefined | "horizontal" |
lazy | 是否使用懒加载 | boolean | undefined | false |
onCollapse | — | ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined | — |
onResize | — | ((index: number, sizes: number[]) => any) | undefined | — |
onResizeStart | — | ((index: number, sizes: number[]) => any) | undefined | — |
onResizeEnd | — | ((index: number, sizes: number[]) => any) | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamSplitterProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamSplitterProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamSplitterProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamSplitterProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamSplitterProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamSplitterProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
实例方法与状态 AsamSplitterExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamSplitterExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamSplitterProps | — |
$attrs | — | AsamSplitterExpose["$attrs"] | — |
$refs | — | AsamSplitterExpose["$refs"] | — |
$slots | — | AsamSplitterSlots | — |
$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: "collapse", index: number, type: "start" | "end", sizes: number[]) => void) & ((event: "resize", index: number, sizes: number[]) => void) & ((event: "resizeStart", index: number, sizes: number[]) => void) & ((event: "resizeEnd", index: number, sizes: number[]) => void) | — |
$el | — | any | — |
$options | — | (AsamSplitterExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamSplitterExpose)["$nextTick"] | — |
$watch | — | (AsamSplitterExpose)["$watch"] | — |
layout | — | enum"horizontal" | "vertical"完整类型：AsamSplitterExpose["layout"] | — |
lazy | — | boolean | undefined | — |
onResize | — | ((index: number, sizes: number[]) => any) | undefined | — |
onCollapse | — | ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined | — |
onResizeStart | — | ((index: number, sizes: number[]) => any) | undefined | — |
onResizeEnd | — | ((index: number, sizes: number[]) => any) | undefined | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamSplitterExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamSplitterExpose["$router"] | — |
类型 AsamSplitterInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamSplitterExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamSplitterProps | — |
$attrs | — | AsamSplitterExpose["$attrs"] | — |
$refs | — | AsamSplitterExpose["$refs"] | — |
$slots | — | AsamSplitterSlots | — |
$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: "collapse", index: number, type: "start" | "end", sizes: number[]) => void) & ((event: "resize", index: number, sizes: number[]) => void) & ((event: "resizeStart", index: number, sizes: number[]) => void) & ((event: "resizeEnd", index: number, sizes: number[]) => void) | — |
$el | — | any | — |
$options | — | (AsamSplitterInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamSplitterInstance)["$nextTick"] | — |
$watch | — | (AsamSplitterInstance)["$watch"] | — |
layout | — | enum"horizontal" | "vertical"完整类型：AsamSplitterExpose["layout"] | — |
lazy | — | boolean | undefined | — |
onResize | — | ((index: number, sizes: number[]) => any) | undefined | — |
onCollapse | — | ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined | — |
onResizeStart | — | ((index: number, sizes: number[]) => any) | undefined | — |
onResizeEnd | — | ((index: number, sizes: number[]) => any) | undefined | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamSplitterExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamSplitterExpose["$router"] | — |
插槽 AsamSplitterSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamSplitterSlots)["default"] | — |
事件 AsamSplitterEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
resizeStart | — | (index: number, sizes: number[]) => boolean | — |
resize | — | (index: number, sizes: number[]) => boolean | — |
resizeEnd | — | (index: number, sizes: number[]) => boolean | — |
collapse | — | (index: number, type: "start" | "end", sizes: number[]) => boolean | — |
类型 AsamSplitterPanelEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:size | — | (value: number | string) => boolean | — |
类型 AsamSplitterPanelPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | — | (AsamSplitterPanelPropsPublic)["size"] | — |
max | — | (AsamSplitterPanelPropsPublic)["max"] | — |
min | — | (AsamSplitterPanelPropsPublic)["min"] | — |
resizable | — | (AsamSplitterPanelPropsPublic)["resizable"] | — |
collapsible | — | boolean | undefined | — |
类型 AsamSplitterPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
lazy | — | boolean | undefined | — |
layout | — | enum"horizontal" | "vertical"完整类型：(AsamSplitterPropsPublic)["layout"] | — |
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
layout
必填：否；声明来源：上游声明。
layout 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
默认值与来源
"horizontal"（已安装运行时；已安装组件）固定上游文档默认：horizontal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
onCollapse
必填：否；声明来源：上游声明。
onCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, type: "start" | "end", sizes: number[]): any
onResize
必填：否；声明来源：上游声明。
onResize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onResizeStart
必填：否；声明来源：上游声明。
onResizeStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onResizeEnd
必填：否；声明来源：上游声明。
onResizeEnd 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
style
必填：否；声明来源：依赖声明。
AsamSplitterProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamSplitterProps, AsamSplitterExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSplitterProps
type PublicContract = {
readonly "layout"?: AsamSplitterExpose["layout"] | undefined;
readonly "lazy"?: boolean | undefined;
readonly "onCollapse"?: ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined;
readonly "onResize"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onResizeStart"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onResizeEnd"?: ((index: number, sizes: number[]) => any) | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamSplitterProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamSplitterProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamSplitterProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamSplitterProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamSplitterProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamSplitterProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "collapse", ...args: [index: number, type: "start" | "end", sizes: number[]]): void
事件参数：(event: "resize", ...args: [index: number, sizes: number[]]): void
事件参数：(event: "resizeStart", ...args: [index: number, sizes: number[]]): void
事件参数：(event: "resizeEnd", ...args: [index: number, sizes: number[]]): 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<(AsamSplitterExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout
必填：是；声明来源：上游声明。
layout 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onResize
必填：否；声明来源：上游声明。
onResize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onCollapse
必填：否；声明来源：上游声明。
onCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, type: "start" | "end", sizes: number[]): any
onResizeStart
必填：否；声明来源：上游声明。
onResizeStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onResizeEnd
必填：否；声明来源：上游声明。
onResizeEnd 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamSplitterExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamSplitterExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamSplitterExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamSplitterExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamSplitterExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamSplitterExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["createHref"]— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamSplitterExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamSplitterExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamSplitterExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamSplitterExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamSplitterExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamSplitterExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamSplitterExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamSplitterExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamSplitterExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamSplitterExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamSplitterExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$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
AsamSplitterExpose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamSplitterExpose, AsamTableColumnExpose, AsamSplitterProps, AsamSplitterSlots, AsamSplitterPanelExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSplitterExpose
type PublicContract = {
"$": AsamSplitterExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamSplitterProps;
"$attrs": AsamSplitterExpose["$attrs"];
"$refs": AsamSplitterExpose["$refs"];
"$slots": AsamSplitterSlots;
"$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: "collapse", index: number, type: "start" | "end", sizes: number[]) => void) & ((event: "resize", index: number, sizes: number[]) => void) & ((event: "resizeStart", index: number, sizes: number[]) => void) & ((event: "resizeEnd", index: number, sizes: number[]) => void);
"$el": any;
"$options": (AsamSplitterExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamSplitterExpose)["$nextTick"];
"$watch": (AsamSplitterExpose)["$watch"];
readonly "layout": AsamSplitterExpose["layout"];
readonly "lazy"?: boolean | undefined;
readonly "onResize"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onCollapse"?: ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined;
readonly "onResizeStart"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onResizeEnd"?: ((index: number, sizes: number[]) => any) | undefined;
"$route": AsamSplitterExpose["$route"];
"$router": AsamSplitterExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "collapse", ...args: [index: number, type: "start" | "end", sizes: number[]]): void
事件参数：(event: "resize", ...args: [index: number, sizes: number[]]): void
事件参数：(event: "resizeStart", ...args: [index: number, sizes: number[]]): void
事件参数：(event: "resizeEnd", ...args: [index: number, sizes: number[]]): 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<(AsamSplitterInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout
必填：是；声明来源：上游声明。
layout 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onResize
必填：否；声明来源：上游声明。
onResize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onCollapse
必填：否；声明来源：上游声明。
onCollapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, type: "start" | "end", sizes: number[]): any
onResizeStart
必填：否；声明来源：上游声明。
onResizeStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
onResizeEnd
必填：否；声明来源：上游声明。
onResizeEnd 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): any
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamSplitterExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamSplitterExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamSplitterExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamSplitterExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamSplitterExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamSplitterExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["history"]>)["createHref"]— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamSplitterExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamSplitterExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamSplitterExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamSplitterExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamSplitterExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamSplitterExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamSplitterExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamSplitterExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$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<AsamSplitterExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamSplitterExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamSplitterExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamSplitterExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamSplitterExpose["$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
AsamSplitterInstance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamSplitterInstance, AsamSplitterExpose, AsamTableColumnExpose, AsamSplitterProps, AsamSplitterSlots, AsamSplitterPanelExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSplitterInstance
type PublicContract = {
"$": AsamSplitterExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamSplitterProps;
"$attrs": AsamSplitterExpose["$attrs"];
"$refs": AsamSplitterExpose["$refs"];
"$slots": AsamSplitterSlots;
"$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: "collapse", index: number, type: "start" | "end", sizes: number[]) => void) & ((event: "resize", index: number, sizes: number[]) => void) & ((event: "resizeStart", index: number, sizes: number[]) => void) & ((event: "resizeEnd", index: number, sizes: number[]) => void);
"$el": any;
"$options": (AsamSplitterInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamSplitterInstance)["$nextTick"];
"$watch": (AsamSplitterInstance)["$watch"];
readonly "layout": AsamSplitterExpose["layout"];
readonly "lazy"?: boolean | undefined;
readonly "onResize"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onCollapse"?: ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined;
readonly "onResizeStart"?: ((index: number, sizes: number[]) => any) | undefined;
readonly "onResizeEnd"?: ((index: number, sizes: number[]) => any) | undefined;
"$route": AsamSplitterExpose["$route"];
"$router": AsamSplitterExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：上游声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
AsamSplitterSlots 公开类型视图
import type { AsamSplitterSlots, AsamSplitterExpose, AsamTableColumnExpose } from '@asam-ui/ui';
// AsamSplitterSlots
type PublicContract = {
"default"?: (AsamSplitterSlots)["default"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};参数与事件说明
resizeStart
必填：是；声明来源：上游声明。
resizeStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): boolean
resize
必填：是；声明来源：上游声明。
resize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): boolean
resizeEnd
必填：是；声明来源：上游声明。
resizeEnd 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, sizes: number[]): boolean
collapse
必填：是；声明来源：上游声明。
collapse 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, type: "start" | "end", sizes: number[]): boolean
AsamSplitterEmits 公开类型视图
import type { AsamSplitterEmits } from '@asam-ui/ui';
// AsamSplitterEmits
type PublicContract = {
"resizeStart": (index: number, sizes: number[]) => boolean;
"resize": (index: number, sizes: number[]) => boolean;
"resizeEnd": (index: number, sizes: number[]) => boolean;
"collapse": (index: number, type: "start" | "end", sizes: number[]) => boolean;
};参数与事件说明
update:size
必填：是；声明来源：上游声明。
update:size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string | number): boolean
AsamSplitterPanelEmits 公开类型视图
import type { AsamSplitterPanelEmits } from '@asam-ui/ui';
// AsamSplitterPanelEmits
type PublicContract = {
"update:size": (value: number | string) => boolean;
};参数与事件说明
size
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
max
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
min
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
resizable
必填：否；声明来源：上游声明。
resizable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
collapsible
必填：否；声明来源：上游声明。
collapsible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamSplitterPanelPropsPublic 公开类型视图
import type { AsamSplitterPanelPropsPublic, AsamSplitterProps } from '@asam-ui/ui';
// AsamSplitterPanelPropsPublic
type PublicContract = {
readonly "size"?: (AsamSplitterPanelPropsPublic)["size"];
readonly "max"?: (AsamSplitterPanelPropsPublic)["max"];
readonly "min"?: (AsamSplitterPanelPropsPublic)["min"];
readonly "resizable"?: (AsamSplitterPanelPropsPublic)["resizable"];
readonly "collapsible"?: boolean | undefined;
};参数与事件说明
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
layout
必填：否；声明来源：上游声明。
layout 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamSplitterPropsPublic 公开类型视图
import type { AsamSplitterPropsPublic, AsamSplitterProps } from '@asam-ui/ui';
// AsamSplitterPropsPublic
type PublicContract = {
readonly "lazy"?: boolean | undefined;
readonly "layout"?: (AsamSplitterPropsPublic)["layout"];
};