标签页 AsamTabs

使用场景

在相关视图之间切换，或使用 ASAM 数据项展示标签和计数。

基础用法与状态

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

基础用法与状态

vue

<template>
	<AsamTabs
		:model-value="active"
		:items="items"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') active = value;
			}
		"
		@change="changes++"
	>
		<template #label="{ item }">{{ item.label }}（{{ item.count ?? 0 }}）</template>
	</AsamTabs>
	<p class="example-paragraph" role="status">当前 {{ active }}；变更 {{ changes }} 次</p>
	<AsamTabs
		:model-value="pane"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') pane = value;
			}
		"
	>
		<AsamTabPane label="概览" name="overview">
			<p class="example-paragraph">概览内容</p>
		</AsamTabPane>
		<AsamTabPane label="明细" name="detail" lazy>
			<p class="example-paragraph">延迟挂载的明细</p>
		</AsamTabPane>
		<AsamTabPane label="暂不可用" name="disabled" disabled />
	</AsamTabs>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTabsBasicDemo' });
import { ref } from 'vue';
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
import type { AsamTabItem } from '@asam-ui/ui';
const active = ref('all');
const pane = ref('overview');
const changes = ref(0);
const items: AsamTabItem[] = [
	{ label: '全部', value: 'all', count: 3 },
	{ label: '草稿', value: 'draft', count: 1 },
	{ label: '锁定', value: 'locked', disabled: true }
];
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<AsamTabs
		:model-value="active"
		:items="items"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') active = value;
			}
		"
		@change="changes++"
	>
		<template #label="{ item }">{{ item.label }}（{{ item.count ?? 0 }}）</template>
	</AsamTabs>
	<p class="example-paragraph" role="status">当前 {{ active }}；变更 {{ changes }} 次</p>
	<AsamTabs
		:model-value="pane"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') pane = value;
			}
		"
	>
		<AsamTabPane label="概览" name="overview">
			<p class="example-paragraph">概览内容</p>
		</AsamTabPane>
		<AsamTabPane label="明细" name="detail" lazy>
			<p class="example-paragraph">延迟挂载的明细</p>
		</AsamTabPane>
		<AsamTabPane label="暂不可用" name="disabled" disabled />
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsBasicDemo' });
import { ref } from 'vue';
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
const active = ref('all');
const pane = ref('overview');
const changes = ref(0);
const items = [
	{ label: '全部', value: 'all', count: 3 },
	{ label: '草稿', value: 'draft', count: 1 },
	{ label: '锁定', value: 'locked', disabled: true }
];
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

使用约定

items 的 label/value/disabled/count 为 ASAM 扩展；label 插槽接收 item。完整说明。

完整使用场景

基础用法

基础的、简洁的标签页。

使用 v-model 或 model-value 控制当前选中的面板 name；default-value 设置未受控时的初始面板。原生默认 name 为首项序号 "0"，使用自定义 name 时应明确设置初始值。value 不是选择面板的公开 prop。

基础用法

许可

vue

<template>
	<AsamTabs
		:model-value="activeName"
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') activeName = value;
			}
		"
		@tab-click="handleClick"
	>
		<AsamTabPane label="用户" name="first">用户</AsamTabPane>
		<AsamTabPane label="配置" name="second">配置</AsamTabPane>
		<AsamTabPane label="角色" name="third">角色</AsamTabPane>
		<AsamTabPane label="任务" name="fourth">任务</AsamTabPane>
	</AsamTabs>
</template>

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

import { ref } from 'vue';

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

const activeName = ref('first');

const handleClick = (tab: AsamTabsPaneContext, event: Event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<AsamTabs
		:model-value="activeName"
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') activeName = value;
			}
		"
		@tab-click="handleClick"
	>
		<AsamTabPane label="用户" name="first">用户</AsamTabPane>
		<AsamTabPane label="配置" name="second">配置</AsamTabPane>
		<AsamTabPane label="角色" name="third">角色</AsamTabPane>
		<AsamTabPane label="任务" name="fourth">任务</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapBasicDemo' });
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
const activeName = ref('first');
const handleClick = (tab, event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

卡片风格的标签

你可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

卡片风格的标签

许可

vue

<template>
	<AsamTabs
		:model-value="activeName"
		type="card"
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') activeName = value;
			}
		"
		@tab-click="handleClick"
	>
		<AsamTabPane label="用户" name="first">用户</AsamTabPane>
		<AsamTabPane label="配置" name="second">配置</AsamTabPane>
		<AsamTabPane label="角色" name="third">角色</AsamTabPane>
		<AsamTabPane label="任务" name="fourth">任务</AsamTabPane>
	</AsamTabs>
</template>

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

import { ref } from 'vue';

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

const activeName = ref('first');

const handleClick = (tab: AsamTabsPaneContext, event: Event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<AsamTabs
		:model-value="activeName"
		type="card"
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') activeName = value;
			}
		"
		@tab-click="handleClick"
	>
		<AsamTabPane label="用户" name="first">用户</AsamTabPane>
		<AsamTabPane label="配置" name="second">配置</AsamTabPane>
		<AsamTabPane label="角色" name="third">角色</AsamTabPane>
		<AsamTabPane label="任务" name="fourth">任务</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapCardStyleDemo' });
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
const activeName = ref('first');
const handleClick = (tab, event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

带有边框的卡片风格

你还可以设置标签页为带有边框的卡片

将 type 设置为 border-card。

带有边框的卡片风格

许可

vue

<template>
	<AsamTabs type="border-card">
		<AsamTabPane label="用户">用户</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

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

许可

vue

<template>
	<AsamTabs type="border-card">
		<AsamTabPane label="用户">用户</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapBorderCardDemo' });
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
</script>

标签位置的设置

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"

标签位置的设置

许可

vue

<template>
	<AsamRadioGroup
		:model-value="tabPosition"
		style="margin-bottom: 30px"
		@update:model-value="
			(value) => {
				if (value === 'top' || value === 'bottom' || value === 'left' || value === 'right')
					tabPosition = value;
			}
		"
	>
		<AsamRadioButton value="top">top</AsamRadioButton>
		<AsamRadioButton value="right">right</AsamRadioButton>
		<AsamRadioButton value="bottom">bottom</AsamRadioButton>
		<AsamRadioButton value="left">left</AsamRadioButton>
	</AsamRadioGroup>

	<AsamTabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
		<AsamTabPane label="用户">用户</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTabsCapTabPositionDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';

import { ref } from 'vue';

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

const tabPosition = ref<AsamTabsProps['tabPosition']>('left');
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
	height: 100%;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<AsamRadioGroup
		:model-value="tabPosition"
		style="margin-bottom: 30px"
		@update:model-value="
			(value) => {
				if (value === 'top' || value === 'bottom' || value === 'left' || value === 'right')
					tabPosition = value;
			}
		"
	>
		<AsamRadioButton value="top">top</AsamRadioButton>
		<AsamRadioButton value="right">right</AsamRadioButton>
		<AsamRadioButton value="bottom">bottom</AsamRadioButton>
		<AsamRadioButton value="left">left</AsamRadioButton>
	</AsamRadioGroup>

	<AsamTabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
		<AsamTabPane label="用户">用户</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapTabPositionDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
const tabPosition = ref('left');
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
	height: 100%;
}

/* stylelint-enable selector-class-pattern */
</style>

自定义标签页的内容

可以通过具名插槽来实现自定义标签页的内容

自定义标签页的内容

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTabs type="border-card" class="demo-tabs">
		<AsamTabPane>
			<template #label>
				<span class="custom-tabs-label">
					<AsamIcon><calendar /></AsamIcon>
					<span>路由</span>
				</span>
			</template>
			路由
		</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTabsCapCustomTabDemo' });
import { AsamTabs, AsamTabPane, AsamIcon } from '@asam-ui/ui';

import { Calendar } from '@asam-ui/icons-vue';
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
	vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTabs type="border-card" class="demo-tabs">
		<AsamTabPane>
			<template #label>
				<span class="custom-tabs-label">
					<AsamIcon><calendar /></AsamIcon>
					<span>路由</span>
				</span>
			</template>
			路由
		</AsamTabPane>
		<AsamTabPane label="配置">配置</AsamTabPane>
		<AsamTabPane label="角色">角色</AsamTabPane>
		<AsamTabPane label="任务">任务</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapCustomTabDemo' });
import { AsamTabs, AsamTabPane, AsamIcon } from '@asam-ui/ui';
import { Calendar } from '@asam-ui/icons-vue';
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
	vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}

/* stylelint-enable selector-class-pattern */
</style>

动态增减标签页

默认、card 和 border-card 三种样式均支持新增、关闭操作。editable 或 addable/closable 按公开参数显示相应入口；tabAdd/tabRemove/edit 通知操作，宿主负责增删面板数据并维护当前选中项。

动态增减标签页

许可

vue

<template>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		editable
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@edit="handleTabsEdit"
	>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

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

import { ref } from 'vue';

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

let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);

const handleTabsEdit = (targetName: AsamTabsTabPaneName | undefined, action: 'remove' | 'add') => {
	if (action === 'add') {
		const newTabName = `${++tabIndex}`;
		editableTabs.value.push({
			title: '新标签页',
			name: newTabName,
			content: '新标签页内容'
		});
		editableTabsValue.value = newTabName;
	} else if (action === 'remove') {
		const tabs = editableTabs.value;
		let activeName = editableTabsValue.value;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					const nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
						activeName = nextTab.name;
					}
				}
			});
		}

		editableTabsValue.value = activeName;
		editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
	}
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		editable
		class="demo-tabs"
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@edit="handleTabsEdit"
	>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapDynamicTabsDemo' });
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);
const handleTabsEdit = (targetName, action) => {
	if (action === 'add') {
		const newTabName = `${++tabIndex}`;
		editableTabs.value.push({
			title: '新标签页',
			name: newTabName,
			content: '新标签页内容'
		});
		editableTabsValue.value = newTabName;
	} else if (action === 'remove') {
		const tabs = editableTabs.value;
		let activeName = editableTabsValue.value;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					const nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
						activeName = nextTab.name;
					}
				}
			});
		}
		editableTabsValue.value = activeName;
		editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
	}
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

添加按钮自定义图标 2.4.0

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

添加按钮自定义图标 2.4.0

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
addIcon
<template>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		class="demo-tabs"
		editable
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@edit="handleTabsEdit"
	>
		<template #add-icon>
			<AsamIcon><Select /></AsamIcon>
		</template>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTabsCapCustomizedAddButtonIconDemo' });
import { AsamTabs, AsamIcon, AsamTabPane } from '@asam-ui/ui';

import { ref } from 'vue';
import { Select } from '@asam-ui/icons-vue';

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

let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);

const handleTabsEdit = (targetName: AsamTabsTabPaneName | undefined, action: 'remove' | 'add') => {
	if (action === 'add') {
		const newTabName = `${++tabIndex}`;
		editableTabs.value.push({
			title: '新标签页',
			name: newTabName,
			content: '新标签页内容'
		});
		editableTabsValue.value = newTabName;
	} else if (action === 'remove') {
		const tabs = editableTabs.value;
		let activeName = editableTabsValue.value;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					const nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
						activeName = nextTab.name;
					}
				}
			});
		}

		editableTabsValue.value = activeName;
		editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
	}
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
addIcon
<template>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		class="demo-tabs"
		editable
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@edit="handleTabsEdit"
	>
		<template #add-icon>
			<AsamIcon><Select /></AsamIcon>
		</template>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapCustomizedAddButtonIconDemo' });
import { AsamTabs, AsamIcon, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
import { Select } from '@asam-ui/icons-vue';
let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);
const handleTabsEdit = (targetName, action) => {
	if (action === 'add') {
		const newTabName = `${++tabIndex}`;
		editableTabs.value.push({
			title: '新标签页',
			name: newTabName,
			content: '新标签页内容'
		});
		editableTabsValue.value = newTabName;
	} else if (action === 'remove') {
		const tabs = editableTabs.value;
		let activeName = editableTabsValue.value;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					const nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
						activeName = nextTab.name;
					}
				}
			});
		}
		editableTabsValue.value = activeName;
		editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
	}
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

增加标签页触发器自定义

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

增加标签页触发器自定义

许可

vue

<template>
	<div style="margin-bottom: 20px">
		<AsamButton type="default" size="small" @click="addTab(editableTabsValue)">
			新增标签页
		</AsamButton>
	</div>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		class="demo-tabs"
		closable
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@tab-remove="removeTab"
	>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

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

import { ref } from 'vue';

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

let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);

const addTab = (targetName: string) => {
	void targetName;
	const newTabName = `${++tabIndex}`;
	editableTabs.value.push({
		title: '新标签页',
		name: newTabName,
		content: '新标签页内容'
	});
	editableTabsValue.value = newTabName;
};
const removeTab = (targetName: AsamTabsTabPaneName) => {
	const tabs = editableTabs.value;
	let activeName = editableTabsValue.value;
	if (activeName === targetName) {
		tabs.forEach((tab, index) => {
			if (tab.name === targetName) {
				const nextTab = tabs[index + 1] || tabs[index - 1];
				if (nextTab) {
					activeName = nextTab.name;
				}
			}
		});
	}

	editableTabsValue.value = activeName;
	editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<div style="margin-bottom: 20px">
		<AsamButton type="default" size="small" @click="addTab(editableTabsValue)">
			新增标签页
		</AsamButton>
	</div>
	<AsamTabs
		:model-value="editableTabsValue"
		type="card"
		class="demo-tabs"
		closable
		@update:model-value="
			(value) => {
				if (typeof value === 'string') editableTabsValue = value;
			}
		"
		@tab-remove="removeTab"
	>
		<AsamTabPane
			v-for="item in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			{{ item.content }}
		</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapCustomizedTriggerDemo' });
import { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
let tabIndex = 2;
const editableTabsValue = ref('2');
const editableTabs = ref([
	{
		title: '标签页一',
		name: '1',
		content: 'Tab 1 content'
	},
	{
		title: '标签页二',
		name: '2',
		content: '标签页二的内容'
	}
]);
const addTab = (targetName) => {
	void targetName;
	const newTabName = `${++tabIndex}`;
	editableTabs.value.push({
		title: '新标签页',
		name: newTabName,
		content: '新标签页内容'
	});
	editableTabsValue.value = newTabName;
};
const removeTab = (targetName) => {
	const tabs = editableTabs.value;
	let activeName = editableTabsValue.value;
	if (activeName === targetName) {
		tabs.forEach((tab, index) => {
			if (tab.name === targetName) {
				const nextTab = tabs[index + 1] || tabs[index - 1];
				if (nextTab) {
					activeName = nextTab.name;
				}
			}
		});
	}
	editableTabsValue.value = activeName;
	editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

默认值2.11.9

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

默认值

许可

vue

<template>
	<AsamTabs v-model="activeName" class="demo-tabs" default-value="third" @tab-click="handleClick">
		<AsamTabPane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
			default-value：第三项
			<br />
			当前项： {{ activeName }}
		</AsamTabPane>
	</AsamTabs>
</template>

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

import { ref } from 'vue';

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

const tabs = ref([
	{ label: '用户', name: 'first' },
	{ label: '配置', name: 'second' },
	{ label: '角色', name: 'third' },
	{ label: '任务', name: 'fourth' }
]);

const activeName = ref();

const handleClick = (tab: AsamTabsPaneContext, event: Event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

许可

vue

<template>
	<AsamTabs v-model="activeName" class="demo-tabs" default-value="third" @tab-click="handleClick">
		<AsamTabPane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
			default-value：第三项
			<br />
			当前项： {{ activeName }}
		</AsamTabPane>
	</AsamTabs>
</template>

<script setup>
defineOptions({ name: 'AsamTabsCapDefaultValueDemo' });
import { AsamTabs, AsamTabPane } from '@asam-ui/ui';
import { ref } from 'vue';
const tabs = ref([
	{ label: '用户', name: 'first' },
	{ label: '配置', name: 'second' },
	{ label: '角色', name: 'third' },
	{ label: '任务', name: 'fourth' }
]);
const activeName = ref();
const handleClick = (tab, event) => {
	console.log(tab, event);
};
</script>

<style>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* stylelint-enable selector-class-pattern */
</style>

触摸、键盘与嵌套实例

窄容器中可沿主轴触摸滚动到末端。垂直于主轴的手势保留页面滚动；禁用项不参与键盘切换。tabNavRef 继续提供 scrollToActiveTab、focusActiveTab、removeFocus、tabListRef、tabBarRef；tabBarRef 的 ref 与 update 可读取及调用。

触摸、键盘与嵌套实例

vue

<template>
	<div class="demo-root-layout">
		<div class="controls">
			<AsamButton
			 type="default"
				native-type="button"
				@click="
					active = '24';
					tabs?.tabNavRef?.scrollToActiveTab();
				"
			>
				选择末项
			</AsamButton>
			<AsamButton type="default" native-type="button" @click="active = '1'"
				>选择首项</AsamButton
			>
			<AsamButton
			 type="default"
				native-type="button"
				@click="position = position === 'top' ? 'left' : 'top'"
			>
				切换方向
			</AsamButton>
			<AsamButton type="default" native-type="button" @click="inspect"
				>调用嵌套实例</AsamButton
			>
		</div>
		<AsamTabs
			ref="tabs"
			:model-value="active"
			:tab-position="position"
			class="touch-tabs"
			@update:model-value="
				(value) => {
					if (typeof value === 'string') active = value;
				}
			"
		>
			<AsamTabPane
				v-for="i in 24"
				:key="i"
				:name="String(i)"
				:label="'标签 ' + i"
				:disabled="i === 2"
			>
				正文 {{ i }}
			</AsamTabPane>
		</AsamTabs>
		<output v-bind="domDataAttrs('data-state', 'active')">{{ active }}</output
		><output v-bind="domDataAttrs('data-state', 'nested')">{{ result }}</output>
	</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamTabsBehaviorDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';
import type { AsamTabsExpose, AsamTabsProps } from '@asam-ui/ui';
const active = ref('1');
const position = ref<AsamTabsProps['tabPosition']>('top');
const tabs = ref<AsamTabsExpose>();
const result = ref('');
const inspect = async () => {
	const nav = tabs.value?.tabNavRef;
	await nav?.scrollToActiveTab();
	await nav?.focusActiveTab();
	nav?.removeFocus();
	nav?.tabBarRef?.update();
	result.value = nav?.tabListRef && nav?.tabBarRef?.ref ? 'nested-ready' : 'not-mounted';
};

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>
<style scoped>
.touch-tabs {
	width: 320px;
	height: 240px;
}

.controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}
</style>

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

vue

<template>
	<div class="demo-root-layout">
		<div class="controls">
			<AsamButton
			 type="default"
				native-type="button"
				@click="
					active = '24';
					tabs?.tabNavRef?.scrollToActiveTab();
				"
			>
				选择末项
			</AsamButton>
			<AsamButton type="default" native-type="button" @click="active = '1'"
				>选择首项</AsamButton
			>
			<AsamButton
			 type="default"
				native-type="button"
				@click="position = position === 'top' ? 'left' : 'top'"
			>
				切换方向
			</AsamButton>
			<AsamButton type="default" native-type="button" @click="inspect"
				>调用嵌套实例</AsamButton
			>
		</div>
		<AsamTabs
			ref="tabs"
			:model-value="active"
			:tab-position="position"
			class="touch-tabs"
			@update:model-value="
				(value) => {
					if (typeof value === 'string') active = value;
				}
			"
		>
			<AsamTabPane
				v-for="i in 24"
				:key="i"
				:name="String(i)"
				:label="'标签 ' + i"
				:disabled="i === 2"
			>
				正文 {{ i }}
			</AsamTabPane>
		</AsamTabs>
		<output v-bind="domDataAttrs('data-state', 'active')">{{ active }}</output
		><output v-bind="domDataAttrs('data-state', 'nested')">{{ result }}</output>
	</div>
</template>
<script setup>
defineOptions({ name: 'AsamTabsBehaviorDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';
const active = ref('1');
const position = ref('top');
const tabs = ref();
const result = ref('');
const inspect = async () => {
	const nav = tabs.value?.tabNavRef;
	await nav?.scrollToActiveTab();
	await nav?.focusActiveTab();
	nav?.removeFocus();
	nav?.tabBarRef?.update();
	result.value = nav?.tabListRef && nav?.tabBarRef?.ref ? 'nested-ready' : 'not-mounted';
};

const domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });
</script>
<style scoped>
.touch-tabs {
	width: 320px;
	height: 240px;
}

.controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}
</style>

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

标签项以 token 宽度作为最小宽度，并按完整标签、计数和关闭按钮所需空间扩展。较长标签由原生导航滚动承接；关闭按钮保留原生悬停显示规则，避免被固定宽度压缩而无法点击。

API

类型 `AsamTabValue`

类型 `AsamTabItem`

属性名	说明	类型	默认值
`label`	—	`string`	—
`value`	—	`AsamTabValue`	—
`disabled`	—	`boolean \| undefined`	—
`count`	—	`number \| undefined`	—

属性 `AsamTabsProps`

属性名	说明	类型	默认值
`items`	—	`AsamTabItem[] \| undefined`	`() => []`
`tabindex`	tabs 的 tabindex	`(AsamTabsProps)["tabindex"]`	—
`stretch`	标签的宽度是否自撑开	`boolean \| undefined`	`false`
`type`	风格类型	`enum"" \| "card" \| "border-card"`完整类型：`(AsamTabsProps)["type"]`	—
`modelValue`	绑定值，选中选项卡的 name，默认值是第一个 tab 的 name	`(AsamTabsProps)["modelValue"]`	—
`closable`	标签是否可关闭	`boolean \| undefined`	`false`
`addable`	标签是否可增加	`boolean \| undefined`	`false`
`defaultValue`	在初始渲染时处于激活状态的标签的值。（避免初始化时变动）	`(AsamTabsProps)["defaultValue"]`	—
`editable`	标签是否同时可增加和关闭	`boolean \| undefined`	`false`
`tabPosition`	选项卡所在位置	`enum"top" \| "bottom" \| "right" \| "left"`完整类型：`(AsamTabsProps)["tabPosition"]`	—
`beforeLeave`	切换标签之前的钩子函数，若返回 false 或者返回被 reject 的 Promise，则阻止切换。	`(AsamTabsProps)["beforeLeave"]`	—

事件 `AsamTabsEmits`

属性名	说明	类型	默认值
`update:modelValue`	—	`[value: AsamTabValue]`	—
`tabClick`	—	查看完整类型 `[pane: { uid: number; getVnode: () => VNode; slots: import("vue").Slots; props: { label?: string \| undefined; name?: string \| number \| undefined; closable?: boolean \| undefined; disabled?: boolean \| undefined; lazy?: boolean \| undefined; }; paneName: AsamTabsTabPaneName \| undefined; active: boolean; index: string \| undefined; isClosable: boolean; isFocusInsidePane: () => boolean \| undefined; }, event: Event]`	—
`tabChange`	—	`[value: AsamTabValue]`	—
`edit`	—	`[paneName: AsamTabValue \| undefined, action: "add" \| "remove"]`	—
`tabRemove`	—	`[value: AsamTabValue]`	—
`tabAdd`	—	`(AsamTabsEmits)["tabAdd"]`	—
`change`	—	`[value: AsamTabValue, item?: AsamTabItem \| undefined]`	—

插槽 `AsamTabsSlots`

属性名	说明	类型	默认值
`default`	—	`(() => VNode[]) \| undefined`	—
`label`	—	`((props: { item: AsamTabItem; }) => VNode[]) \| undefined`	—
`add-icon`	—	`(() => VNode[]) \| undefined`	—

实例方法与状态 `AsamTabsExpose`

属性名	说明	类型	默认值
`currentName`	—	`AsamTabsTabPaneName`	—
`tabNavRef`	—	`AsamTabsTabNavInstance \| undefined`	—

类型 `AsamTabsInstance`

属性名	说明	类型	默认值
`currentName`	—	`AsamTabsTabPaneName`	—
`tabNavRef`	—	`AsamTabsTabNavInstance \| undefined`	—

类型 `AsamTabsTabBarInstance`

属性名	说明	类型	默认值
`$`	—	`AsamTabsTabBarInstance["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	查看完整类型 `{ readonly tabs?: AsamTabsPaneContext[] \| undefined; readonly tabRefs?: { [key: AsamTabsTabPaneName]: HTMLDivElement; } \| undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps`	—
`$attrs`	—	`AsamTabsTabBarInstance["$attrs"]`	—
`$refs`	—	`AsamTabsTabBarInstance["$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`	—	`(AsamTabsTabBarInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamTabsTabBarInstance)["$nextTick"]`	—
`$watch`	—	`(AsamTabsTabBarInstance)["$watch"]`	—
`tabs`	—	`(AsamTabsTabBarInstance)["tabs"]`	—
`tabRefs`	—	`{ [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; }`	—
`ref`	选项卡根 HTML 元素	`HTMLDivElement \| undefined`	—
`update`	—	`() => void`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamTabsTabBarInstance["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamTabsTabBarInstance["$router"]`	—

类型 `AsamTabsTabBarProps`

属性名	说明	类型	默认值
`tabs`	—	`(AsamTabsTabBarProps)["tabs"]`	—
`tabRefs`	—	`{ [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; } \| undefined`	—

类型 `AsamTabsTabBarPropsPublic`

属性名	说明	类型	默认值
`tabs`	—	`(AsamTabsTabBarPropsPublic)["tabs"]`	—
`tabRefs`	—	`{ [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; } \| undefined`	—

类型 `AsamTabsTabNavEmits`

属性名	说明	类型	默认值
`tabClick`	—	`(tab: AsamTabsPaneContext, tabName: AsamTabsTabPaneName, ev: Event) => boolean`	—
`tabRemove`	—	`(tab: AsamTabsPaneContext, ev: Event) => boolean`	—

类型 `AsamTabsTabNavInstance`

属性名	说明	类型	默认值
`$`	—	`AsamTabsTabBarInstance["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`(AsamTabsTabNavInstance)["$props"]`	—
`$attrs`	—	`AsamTabsTabBarInstance["$attrs"]`	—
`$refs`	—	`AsamTabsTabBarInstance["$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: "tabClick", tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string \| undefined; name?: string \| number \| undefined; closable?: boolean \| undefined; disabled?: boolean \| undefined; lazy?: boolean \| undefined; }; paneName: AsamTabsTabPaneName \| undefined; active: boolean; index: string \| undefined; isClosable: boolean; isFocusInsidePane: () => boolean \| undefined; }, tabName: AsamTabsTabPaneName, ev: Event) => void) & ((event: "tabRemove", tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string \| undefined; name?: string \| number \| undefined; closable?: boolean \| undefined; disabled?: boolean \| undefined; lazy?: boolean \| undefined; }; paneName: AsamTabsTabPaneName \| undefined; active: boolean; index: string \| undefined; isClosable: boolean; isFocusInsidePane: () => boolean \| undefined; }, ev: Event) => void)	—
`$el`	—	`any`	—
`$options`	—	`(AsamTabsTabNavInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamTabsTabNavInstance)["$nextTick"]`	—
`$watch`	—	`(AsamTabsTabNavInstance)["$watch"]`	—
`type`	—	`enum"" \| "card" \| "border-card"`完整类型：`(AsamTabsTabNavInstance)["type"]`	—
`stretch`	—	`boolean`	—
`tabindex`	—	`(AsamTabsTabNavInstance)["tabindex"]`	—
`editable`	—	`boolean`	—
`panes`	—	`(AsamTabsTabNavInstance)["panes"]`	—
`currentName`	—	`(AsamTabsTabNavInstance)["currentName"]`	—
`onTabClick`	—	`(AsamTabsTabNavInstance)["onTabClick"]`	—
`onTabRemove`	—	`(AsamTabsTabNavInstance)["onTabRemove"]`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamTabsTabBarInstance["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamTabsTabBarInstance["$router"]`	—
`scrollToActiveTab`	—	`() => Promise<void>`	—
`removeFocus`	—	`() => void`	—
`focusActiveTab`	—	`() => void`	—
`scheduleRender`	—	`() => void`	—
`tabListRef`	—	`HTMLDivElement \| undefined`	—
`tabBarRef`	—	`AsamTabsTabBarInstance \| undefined`	—

类型 `AsamTabsTabNavProps`

属性名	说明	类型	默认值
`stretch`	—	`boolean`	—
`type`	—	`enum"" \| "card" \| "border-card"`完整类型：`(AsamTabsTabNavProps)["type"]`	—
`editable`	—	`boolean`	—
`currentName`	—	`(AsamTabsTabNavProps)["currentName"]`	—
`panes`	—	`(AsamTabsTabNavProps)["panes"]`	—
`tabindex`	—	`(AsamTabsTabNavProps)["tabindex"]`	—

类型 `AsamTabsTabNavPropsPublic`

属性名	说明	类型	默认值
`tabindex`	—	`(AsamTabsTabNavPropsPublic)["tabindex"]`	—
`stretch`	—	`boolean \| undefined`	—
`type`	—	`enum"" \| "card" \| "border-card"`完整类型：`(AsamTabsTabNavPropsPublic)["type"]`	—
`editable`	—	`boolean \| undefined`	—
`currentName`	—	`(AsamTabsTabNavPropsPublic)["currentName"]`	—
`panes`	—	`(AsamTabsTabNavPropsPublic)["panes"]`	—

类型 `AsamTabsTabPaneInstance`

属性名	说明	类型	默认值
`$`	—	`AsamTabsTabBarInstance["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamTabPaneProps`	—
`$attrs`	—	`AsamTabsTabBarInstance["$attrs"]`	—
`$refs`	—	`AsamTabsTabBarInstance["$refs"]`	—
`$slots`	—	`(AsamTabsTabPaneInstance)["$slots"]`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: string, ...args: any[]) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamTabsTabPaneInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamTabsTabPaneInstance)["$nextTick"]`	—
`$watch`	—	`(AsamTabsTabPaneInstance)["$watch"]`	—
`label`	—	`string`	—
`closable`	—	`boolean`	—
`disabled`	是否禁用	`boolean \| undefined`	—
`lazy`	标签是否延迟渲染	`boolean \| undefined`	—
`name`	与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0	`string \| number \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamTabsTabBarInstance["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamTabsTabBarInstance["$router"]`	—

类型 `AsamTabsTabPaneName`

类型 `AsamTabsTabPaneProps`

属性名	说明	类型	默认值
`label`	Tab-pane 的标题内容	`string \| undefined`	—
`name`	与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0	`string \| number \| undefined`	—
`closable`	标签是否可关闭	`boolean \| undefined`	—
`disabled`	是否禁用	`boolean \| undefined`	—
`lazy`	标签是否延迟渲染	`boolean \| undefined`	—

类型 `AsamTabsTabPanePropsPublic`

属性名	说明	类型	默认值
`disabled`	—	`boolean \| undefined`	—
`lazy`	—	`boolean \| undefined`	—
`name`	—	`(AsamTabsTabPanePropsPublic)["name"]`	—
`label`	—	`string \| undefined`	—
`closable`	—	`(AsamTabsTabPanePropsPublic)["closable"]`	—

类型 `AsamTabsPaneContext`

属性名	说明	类型	默认值
`uid`	—	`number`	—
`getVnode`	—	`() => VNode`	—
`slots`	—	`AsamAvatarGroupSlots`	—
`props`	—	`{ label?: string \| undefined; name?: string \| number \| undefined; closable?: boolean \| undefined; disabled?: boolean \| undefined; lazy?: boolean \| undefined; }`	—
`paneName`	—	`AsamTabsTabPaneName \| undefined`	—
`active`	—	`boolean`	—
`index`	—	`string \| undefined`	—
`isClosable`	—	`boolean`	—
`isFocusInsidePane`	—	`() => boolean \| undefined`	—

类型 `AsamTabsPanes`

类型 `AsamTabsPropsPublic`

属性名	说明	类型	默认值
`tabindex`	—	`(AsamTabsPropsPublic)["tabindex"]`	—
`stretch`	—	`boolean \| undefined`	—
`type`	—	`enum"" \| "card" \| "border-card"`完整类型：`(AsamTabsPropsPublic)["type"]`	—
`modelValue`	—	`(AsamTabsPropsPublic)["modelValue"]`	—
`closable`	—	`boolean \| undefined`	—
`addable`	—	`boolean \| undefined`	—
`defaultValue`	—	`(AsamTabsPropsPublic)["defaultValue"]`	—
`editable`	—	`boolean \| undefined`	—
`tabPosition`	—	`enum"top" \| "bottom" \| "right" \| "left"`完整类型：`(AsamTabsPropsPublic)["tabPosition"]`	—
`beforeLeave`	—	`(AsamTabsPropsPublic)["beforeLeave"]`	—

类型 `AsamTabsRootContext`

属性名	说明	类型	默认值
`props`	—	`AsamTabsRootContext["props"]`	—
`currentName`	—	`Ref<AsamTabsTabPaneName, AsamTabsTabPaneName>`	—
`registerPane`	—	`(pane: AsamTabsPaneContext) => void`	—
`unregisterPane`	—	`(pane: AsamTabsPaneContext) => void`	—
`nav$`	—	`Ref<AsamTabsTabNavInstance \| undefined, AsamTabsTabNavInstance \| undefined>`	—

用法与契约补充说明

使用约定

items 的 label/value/disabled/count 为 ASAM 扩展；label 插槽接收 item。default 插槽放 AsamTabPane 以承载内容；两种方式可以分别使用，不应重复声明同一个 name。v-model 支持字符串或数值，change 带数据项；tabClick/tabChange/edit/tabAdd/tabRemove 保留基础事件。type、tabPosition、editable/closable、beforeLeave 等以公开参数为准。禁用项阻止选择并退出键盘序列；不声称当前实现添加了额外 aria-disabled。

参数与事件补充说明

组合契约按分支生效；请同时查看公开类型。

AsamTabValue 公开类型视图

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

// AsamTabValue
type PublicContract = AsamTabValue;

参数与事件说明

`label`

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

`value`

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

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

`count`

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

AsamTabItem 公开类型视图

import type { AsamTabItem, AsamTabsTabPaneInstance, AsamTabValue, AsamTabsProps } from '@asam-ui/ui';

// AsamTabItem
type PublicContract = {
	"label": string;
	"value": AsamTabValue;
	"disabled"?: boolean | undefined;
	"count"?: number | undefined;
};

完整标签页容器 API，并保留 ASAM 数据驱动标签。

参数与事件说明

`items`

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

默认值与来源

() => []（源码表达式；ASAM 声明）

`tabindex`

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

默认值与来源

未知 / 未声明

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

`stretch`

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

stretch 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`type`

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

type 参数与事件数据

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

枚举："" / "card" / "border-card"

默认值与来源

未知 / 未声明

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

`modelValue`

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

默认值与来源

未知 / 未声明

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

`closable`

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

closable 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`addable`

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

addable 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`defaultValue`

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

默认值与来源

未知 / 未声明

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

`editable`

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

editable 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`tabPosition`

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

tabPosition 参数与事件数据

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

枚举："top" / "bottom" / "right" / "left"

默认值与来源

未知 / 未声明

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

`beforeLeave`

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

beforeLeave 参数与事件数据

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

事件参数：(newName: AsamTabsTabPaneName, oldName: AsamTabsTabPaneName): ReturnType<Extract<NonNullable<(AsamTabsProps)["beforeLeave"]>, (...args: never[]) => unknown>>

默认值与来源

未知 / 未声明

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

AsamTabsProps 公开类型视图

import type { AsamTabsProps, AsamTabItem, AsamTabsTabPaneName, AsamTabsExpose } from '@asam-ui/ui';

// AsamTabsProps
type PublicContract = {
	"items"?: AsamTabItem[] | undefined;
	readonly "tabindex"?: (AsamTabsProps)["tabindex"];
	readonly "stretch"?: boolean | undefined;
	readonly "type"?: (AsamTabsProps)["type"];
	readonly "modelValue"?: (AsamTabsProps)["modelValue"];
	readonly "closable"?: boolean | undefined;
	readonly "addable"?: boolean | undefined;
	readonly "defaultValue"?: (AsamTabsProps)["defaultValue"];
	readonly "editable"?: boolean | undefined;
	readonly "tabPosition"?: (AsamTabsProps)["tabPosition"];
	readonly "beforeLeave"?: (AsamTabsProps)["beforeLeave"];
};

参数与事件说明

`update:modelValue`

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

`tabClick`

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

`tabChange`

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

`edit`

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

`tabRemove`

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

`tabAdd`

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

`change`

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

AsamTabsEmits 公开类型视图

import type { VNode } from 'vue';
import type { AsamTabsEmits, AsamTabValue, AsamTabsTabPaneName, AsamTabItem } from '@asam-ui/ui';

// AsamTabsEmits
type PublicContract = {
	"update:modelValue": [value: AsamTabValue];
	"tabClick": [pane: { uid: number; getVnode: () => VNode; slots: import("vue").Slots; props: { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; }; paneName: AsamTabsTabPaneName | undefined; active: boolean; index: string | undefined; isClosable: boolean; isFocusInsidePane: () => boolean | undefined; }, event: Event];
	"tabChange": [value: AsamTabValue];
	"edit": [paneName: AsamTabValue | undefined, action: "add" | "remove"];
	"tabRemove": [value: AsamTabValue];
	"tabAdd": (AsamTabsEmits)["tabAdd"];
	"change": [value: AsamTabValue, item?: AsamTabItem | undefined];
};

参数与事件说明

`default`

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

default 参数与事件数据

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

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

`label`

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

label 参数与事件数据

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

事件参数：(props: { item: AsamTabItem; }): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]

`add-icon`

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

add-icon 参数与事件数据

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

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

AsamTabsSlots 公开类型视图

import type { VNode } from 'vue';
import type { AsamTabsSlots, AsamTabItem } from '@asam-ui/ui';

// AsamTabsSlots
type PublicContract = {
	"default"?: (() => VNode[]) | undefined;
	"label"?: ((props: { item: AsamTabItem; }) => VNode[]) | undefined;
	"add-icon"?: (() => VNode[]) | undefined;
};

参数与事件说明

`currentName`

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

`tabNavRef`

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

AsamTabsExpose 公开类型视图

import type { AsamTabsExpose, AsamTabsTabPaneName, AsamTabsTabNavInstance } from '@asam-ui/ui';

// AsamTabsExpose
type PublicContract = {
	"currentName": AsamTabsTabPaneName;
	"tabNavRef": AsamTabsTabNavInstance | undefined;
};

参数与事件说明

`currentName`

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

`tabNavRef`

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

AsamTabsInstance 公开类型视图

import type { AsamTabsInstance, AsamTabsTabPaneName, AsamTabsExpose, AsamTabsTabNavInstance } from '@asam-ui/ui';

// AsamTabsInstance
type PublicContract = {
	"currentName": AsamTabsTabPaneName;
	"tabNavRef": AsamTabsTabNavInstance | 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<(AsamTabsTabBarInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

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

`tabs`

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

tabs 参数与事件数据

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

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

`tabRefs`

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

`ref`

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

ref 参数与事件数据

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

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

`update`

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

update 参数与事件数据

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

事件参数：(): void

`$route`

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

$route 参数与事件数据

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

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

`$router`

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

$router 参数与事件数据

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

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

AsamTabsTabBarInstance 公开类型视图

import type { VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, Ref, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTabsTabBarInstance, AsamTableColumnExpose, AsamTabsPaneContext, AsamTabsTabPaneName, AsamAvatarGroupSlots, AsamTabsTabPaneInstance, AsamTabsTabBarProps, AsamTabsProps, AsamTabsTabPaneProps, AsamTabsTabNavInstance } from '@asam-ui/ui';

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

// AsamTabsTabBarInstance
type PublicContract = {
	"$": AsamTabsTabBarInstance["$"];
	"$data": AsamTableColumnExpose;
	"$props": { readonly tabs?: AsamTabsPaneContext[] | undefined; readonly tabRefs?: { [key: AsamTabsTabPaneName]: HTMLDivElement; } | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
	"$attrs": AsamTabsTabBarInstance["$attrs"];
	"$refs": AsamTabsTabBarInstance["$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": (AsamTabsTabBarInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamTabsTabBarInstance)["$nextTick"];
	"$watch": (AsamTabsTabBarInstance)["$watch"];
	readonly "tabs": (AsamTabsTabBarInstance)["tabs"];
	readonly "tabRefs": { [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; };
	"ref": HTMLDivElement | undefined;
	"update": () => void;
	"$route": AsamTabsTabBarInstance["$route"];
	"$router": AsamTabsTabBarInstance["$router"];
};

参数与事件说明

`tabs`

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

默认值与来源

未知 / 未声明

固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）

`tabRefs`

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

默认值与来源

未知 / 未声明

固定上游源码工厂（未执行）：() => mutable({} as const)（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamTabsTabBarProps 公开类型视图

import type { AsamTabsTabBarProps, AsamTabsTabPaneName } from '@asam-ui/ui';

// AsamTabsTabBarProps
type PublicContract = {
	"tabs"?: (AsamTabsTabBarProps)["tabs"];
	"tabRefs"?: { [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; } | undefined;
};

参数与事件说明

`tabs`

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

默认值与来源

未知 / 未声明

固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）

`tabRefs`

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

默认值与来源

未知 / 未声明

固定上游源码工厂（未执行）：() => mutable({} as const)（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamTabsTabBarPropsPublic 公开类型视图

import type { AsamTabsTabBarPropsPublic, AsamTabsTabPaneName } from '@asam-ui/ui';

// AsamTabsTabBarPropsPublic
type PublicContract = {
	readonly "tabs"?: (AsamTabsTabBarPropsPublic)["tabs"];
	readonly "tabRefs"?: { [key: string]: HTMLDivElement; [key: number]: HTMLDivElement; } | undefined;
};

参数与事件说明

`tabClick`

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

tabClick 参数与事件数据

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

事件参数：(tab: AsamTabsPaneContext, tabName: AsamTabsTabPaneName, ev: Event): boolean

`tabRemove`

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

tabRemove 参数与事件数据

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

事件参数：(tab: AsamTabsPaneContext, ev: Event): boolean

AsamTabsTabNavEmits 公开类型视图

import type { AsamTabsTabNavEmits, AsamTabsPaneContext, AsamTabsTabPaneName, AsamTabsExpose } from '@asam-ui/ui';

// AsamTabsTabNavEmits
type PublicContract = {
	"tabClick": (tab: AsamTabsPaneContext, tabName: AsamTabsTabPaneName, ev: Event) => boolean;
	"tabRemove": (tab: AsamTabsPaneContext, ev: Event) => boolean;
};

参数与事件说明

`$`

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

$ 参数与事件数据

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

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

`$data`

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

`$props`

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

$props 参数与事件数据

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

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

`$attrs`

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

$attrs 参数与事件数据

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

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

`$refs`

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

$refs 参数与事件数据

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

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

`$slots`

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

$slots 参数与事件数据

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

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

`$root`

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

`$parent`

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

`$host`

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

$host 参数与事件数据

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

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

`$emit`

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

$emit 参数与事件数据

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

事件参数：(event: "tabClick", ...args: [tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; }; paneName: AsamTabsTabPaneName | undefined; active: boolean; index: string | undefined; isClosable: boolean; isFocusInsidePane: () => boolean | undefined; }, tabName: AsamTabsTabPaneName, ev: globalThis.Event]): void

事件参数：(event: "tabRemove", ...args: [tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; }; paneName: AsamTabsTabPaneName | undefined; active: boolean; index: string | undefined; isClosable: boolean; isFocusInsidePane: () => boolean | undefined; }, ev: globalThis.Event]): 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<(AsamTabsTabNavInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

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

`type`

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

type 参数与事件数据

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

枚举："" / "card" / "border-card"

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

`stretch`

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

stretch 参数与事件数据

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

枚举：false / true

`tabindex`

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

tabindex 参数与事件数据

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

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

`editable`

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

editable 参数与事件数据

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

枚举：false / true

`panes`

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

panes 参数与事件数据

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

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

`currentName`

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

currentName 参数与事件数据

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

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

`onTabClick`

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

onTabClick 参数与事件数据

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

事件参数：(tab: Parameters<Extract<NonNullable<(AsamTabsTabNavInstance)["onTabClick"]>, (...args: never[]) => unknown>>[0], tabName: AsamTabsTabPaneName, ev: Event): any

`onTabRemove`

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

onTabRemove 参数与事件数据

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

事件参数：(tab: Parameters<Extract<NonNullable<(AsamTabsTabNavInstance)["onTabRemove"]>, (...args: never[]) => unknown>>[0], ev: Event): any

`$route`

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

$route 参数与事件数据

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

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

`$router`

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

$router 参数与事件数据

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

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

`scrollToActiveTab`

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

scrollToActiveTab 参数与事件数据

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

事件参数：(): Promise<void>

`removeFocus`

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

removeFocus 参数与事件数据

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

事件参数：(): void

`focusActiveTab`

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

focusActiveTab 参数与事件数据

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

事件参数：(): void

`scheduleRender`

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

scheduleRender 参数与事件数据

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

事件参数：(): void

`tabListRef`

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

tabListRef 参数与事件数据

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

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

`tabBarRef`

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

AsamTabsTabNavInstance 公开类型视图

import type { VNode, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTabsTabNavInstance, AsamTabsTabBarInstance, AsamTableColumnExpose, AsamTabsTabPaneName, AsamAvatarGroupSlots, AsamTabsPaneContext, AsamTabsExpose, AsamTabsTabPaneInstance, AsamTabsProps, AsamTabsTabPaneProps } from '@asam-ui/ui';

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

// AsamTabsTabNavInstance
type PublicContract = {
	"$": AsamTabsTabBarInstance["$"];
	"$data": AsamTableColumnExpose;
	"$props": (AsamTabsTabNavInstance)["$props"];
	"$attrs": AsamTabsTabBarInstance["$attrs"];
	"$refs": AsamTabsTabBarInstance["$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: "tabClick", tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; }; paneName: AsamTabsTabPaneName | undefined; active: boolean; index: string | undefined; isClosable: boolean; isFocusInsidePane: () => boolean | undefined; }, tabName: AsamTabsTabPaneName, ev: Event) => void) & ((event: "tabRemove", tab: { uid: number; getVnode: () => VNode; slots: AsamTabsTabBarInstance["$slots"]; props: { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; }; paneName: AsamTabsTabPaneName | undefined; active: boolean; index: string | undefined; isClosable: boolean; isFocusInsidePane: () => boolean | undefined; }, ev: Event) => void);
	"$el": any;
	"$options": (AsamTabsTabNavInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamTabsTabNavInstance)["$nextTick"];
	"$watch": (AsamTabsTabNavInstance)["$watch"];
	readonly "type": (AsamTabsTabNavInstance)["type"];
	readonly "stretch": boolean;
	readonly "tabindex": (AsamTabsTabNavInstance)["tabindex"];
	readonly "editable": boolean;
	readonly "panes": (AsamTabsTabNavInstance)["panes"];
	readonly "currentName": (AsamTabsTabNavInstance)["currentName"];
	readonly "onTabClick"?: (AsamTabsTabNavInstance)["onTabClick"];
	readonly "onTabRemove"?: (AsamTabsTabNavInstance)["onTabRemove"];
	"$route": AsamTabsTabBarInstance["$route"];
	"$router": AsamTabsTabBarInstance["$router"];
	"scrollToActiveTab": () => Promise<void>;
	"removeFocus": () => void;
	"focusActiveTab": () => void;
	"scheduleRender": () => void;
	"tabListRef": HTMLDivElement | undefined;
	"tabBarRef": AsamTabsTabBarInstance | undefined;
};

参数与事件说明

`stretch`

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

stretch 参数与事件数据

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

枚举：false / true

`type`

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

type 参数与事件数据

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

枚举："" / "card" / "border-card"

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

`editable`

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

editable 参数与事件数据

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

枚举：false / true

`currentName`

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

currentName 参数与事件数据

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

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

`panes`

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

panes 参数与事件数据

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

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

`tabindex`

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

AsamTabsTabNavProps 公开类型视图

import type { AsamTabsTabNavProps, AsamTabsTabNavInstance, AsamTabsTabPaneName, AsamTabsProps } from '@asam-ui/ui';

// AsamTabsTabNavProps
type PublicContract = {
	readonly "stretch": boolean;
	readonly "type": (AsamTabsTabNavProps)["type"];
	readonly "editable": boolean;
	readonly "currentName": (AsamTabsTabNavProps)["currentName"];
	readonly "panes": (AsamTabsTabNavProps)["panes"];
	readonly "tabindex"?: (AsamTabsTabNavProps)["tabindex"];
};

参数与事件说明

`tabindex`

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

`stretch`

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

stretch 参数与事件数据

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

枚举：false / true

`type`

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

type 参数与事件数据

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

枚举："" / "card" / "border-card"

`editable`

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

editable 参数与事件数据

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

枚举：false / true

`currentName`

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

`panes`

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

AsamTabsTabNavPropsPublic 公开类型视图

import type { AsamTabsTabNavPropsPublic, AsamTabsProps, AsamTabsTabPaneName } from '@asam-ui/ui';

// AsamTabsTabNavPropsPublic
type PublicContract = {
	readonly "tabindex"?: (AsamTabsTabNavPropsPublic)["tabindex"];
	readonly "stretch"?: boolean | undefined;
	readonly "type"?: (AsamTabsTabNavPropsPublic)["type"];
	readonly "editable"?: boolean | undefined;
	readonly "currentName"?: (AsamTabsTabNavPropsPublic)["currentName"];
	readonly "panes"?: (AsamTabsTabNavPropsPublic)["panes"];
};

参数与事件说明

`$`

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

$ 参数与事件数据

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

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

`$data`

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

`$props`

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

`$attrs`

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

$attrs 参数与事件数据

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

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

`$refs`

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

$refs 参数与事件数据

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

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

`$slots`

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

`$root`

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

`$parent`

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

`$host`

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

$host 参数与事件数据

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

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

`$emit`

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

$emit 参数与事件数据

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

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

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

`$el`

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

`$options`

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

`$forceUpdate`

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

$forceUpdate 参数与事件数据

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

事件参数：(): void

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

`$nextTick`

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

$nextTick 参数与事件数据

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

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

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

`$watch`

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

$watch 参数与事件数据

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

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamTabsTabPaneInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

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

`label`

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

`closable`

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

closable 参数与事件数据

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

枚举：false / true

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

`lazy`

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

lazy 参数与事件数据

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

枚举：false / true

`name`

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

默认值与来源

未知 / 未声明

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

`$route`

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

$route 参数与事件数据

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

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

`$router`

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

$router 参数与事件数据

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

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

AsamTabsTabPaneInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTabsTabPaneInstance, AsamTabsTabBarInstance, AsamTableColumnExpose, AsamTabPaneProps, AsamTabsTabPaneProps, AsamTabsTabNavInstance, AsamTabsProps, AsamTabsPaneContext } from '@asam-ui/ui';

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

// AsamTabsTabPaneInstance
type PublicContract = {
	"$": AsamTabsTabBarInstance["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamTabPaneProps;
	"$attrs": AsamTabsTabBarInstance["$attrs"];
	"$refs": AsamTabsTabBarInstance["$refs"];
	"$slots": (AsamTabsTabPaneInstance)["$slots"];
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: string, ...args: any[]) => void;
	"$el": any;
	"$options": (AsamTabsTabPaneInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamTabsTabPaneInstance)["$nextTick"];
	"$watch": (AsamTabsTabPaneInstance)["$watch"];
	readonly "label": string;
	readonly "closable": boolean;
	readonly "disabled"?: boolean | undefined;
	readonly "lazy"?: boolean | undefined;
	readonly "name"?: string | number | undefined;
	"$route": AsamTabsTabBarInstance["$route"];
	"$router": AsamTabsTabBarInstance["$router"];
};

组合契约按分支生效；请同时查看公开类型。

AsamTabsTabPaneName 公开类型视图

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

// AsamTabsTabPaneName
type PublicContract = AsamTabsTabPaneName;

参数与事件说明

`label`

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

默认值与来源

未知 / 未声明

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

`name`

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

默认值与来源

未知 / 未声明

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

`closable`

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

closable 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

`lazy`

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

lazy 参数与事件数据

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

枚举：false / true

AsamTabsTabPaneProps 公开类型视图

import type { AsamTabsTabPaneProps, AsamTabsTabPaneInstance, AsamTabsProps } from '@asam-ui/ui';

// AsamTabsTabPaneProps
type PublicContract = {
	"label"?: string | undefined;
	"name"?: string | number | undefined;
	"closable"?: boolean | undefined;
	"disabled"?: boolean | undefined;
	"lazy"?: boolean | undefined;
};

参数与事件说明

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

`lazy`

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

lazy 参数与事件数据

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

枚举：false / true

`name`

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

默认值与来源

未知 / 未声明

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

`label`

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

默认值与来源

未知 / 未声明

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

`closable`

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

closable 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

AsamTabsTabPanePropsPublic 公开类型视图

import type { AsamTabsTabPanePropsPublic, AsamTabsProps, AsamTabsTabPaneProps } from '@asam-ui/ui';

// AsamTabsTabPanePropsPublic
type PublicContract = {
	readonly "disabled"?: boolean | undefined;
	readonly "lazy"?: boolean | undefined;
	readonly "name"?: (AsamTabsTabPanePropsPublic)["name"];
	readonly "label"?: string | undefined;
	readonly "closable"?: (AsamTabsTabPanePropsPublic)["closable"];
};

参数与事件说明

`uid`

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

`getVnode`

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

getVnode 参数与事件数据

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

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

`slots`

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

slots 参数与事件数据

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

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

`props`

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

props 参数与事件数据

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

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

`paneName`

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

`active`

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

active 参数与事件数据

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

枚举：false / true

`index`

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

`isClosable`

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

isClosable 参数与事件数据

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

枚举：false / true

`isFocusInsidePane`

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

isFocusInsidePane 参数与事件数据

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

事件参数：(): boolean | undefined

AsamTabsPaneContext 公开类型视图

import type { VNode } from 'vue';
import type { AsamTabsPaneContext, AsamAvatarGroupSlots, AsamTabsTabBarInstance, AsamTabsTabPaneName, AsamTabsTabNavInstance, AsamTabsTabPaneProps } from '@asam-ui/ui';

// AsamTabsPaneContext
type PublicContract = {
	"uid": number;
	"getVnode": () => VNode;
	"slots": AsamAvatarGroupSlots;
	"props": { label?: string | undefined; name?: string | number | undefined; closable?: boolean | undefined; disabled?: boolean | undefined; lazy?: boolean | undefined; };
	"paneName": AsamTabsTabPaneName | undefined;
	"active": boolean;
	"index": string | undefined;
	"isClosable": boolean;
	"isFocusInsidePane": () => boolean | undefined;
};

AsamTabsPanes 公开类型视图

import type { AsamTabsPanes, AsamTabsPaneContext } from '@asam-ui/ui';

// AsamTabsPanes
type PublicContract = {
	[key: number]: AsamTabsPaneContext;
};

参数与事件说明

`tabindex`

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

`stretch`

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

stretch 参数与事件数据

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

枚举：false / true

`type`

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

type 参数与事件数据

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

枚举："" / "card" / "border-card"

`modelValue`

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

`closable`

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

closable 参数与事件数据

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

枚举：false / true

`addable`

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

addable 参数与事件数据

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

枚举：false / true

`defaultValue`

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

`editable`

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

editable 参数与事件数据

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

枚举：false / true

`tabPosition`

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

tabPosition 参数与事件数据

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

枚举："top" / "bottom" / "right" / "left"

`beforeLeave`

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

beforeLeave 参数与事件数据

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

事件参数：(newName: AsamTabsTabPaneName, oldName: AsamTabsTabPaneName): ReturnType<Extract<NonNullable<(AsamTabsPropsPublic)["beforeLeave"]>, (...args: never[]) => unknown>>

AsamTabsPropsPublic 公开类型视图

import type { AsamTabsPropsPublic, AsamTabsProps, AsamTabsTabPaneName, AsamTabsExpose } from '@asam-ui/ui';

// AsamTabsPropsPublic
type PublicContract = {
	readonly "tabindex"?: (AsamTabsPropsPublic)["tabindex"];
	readonly "stretch"?: boolean | undefined;
	readonly "type"?: (AsamTabsPropsPublic)["type"];
	readonly "modelValue"?: (AsamTabsPropsPublic)["modelValue"];
	readonly "closable"?: boolean | undefined;
	readonly "addable"?: boolean | undefined;
	readonly "defaultValue"?: (AsamTabsPropsPublic)["defaultValue"];
	readonly "editable"?: boolean | undefined;
	readonly "tabPosition"?: (AsamTabsPropsPublic)["tabPosition"];
	readonly "beforeLeave"?: (AsamTabsPropsPublic)["beforeLeave"];
};

参数与事件说明

`props`

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

`currentName`

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

currentName 参数与事件数据

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

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

`registerPane`

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

registerPane 参数与事件数据

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

事件参数：(pane: AsamTabsPaneContext): void

`unregisterPane`

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

unregisterPane 参数与事件数据

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

事件参数：(pane: AsamTabsPaneContext): void

`nav$`

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

nav$ 参数与事件数据

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

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

AsamTabsRootContext 公开类型视图

import type { Ref } from 'vue';
import type { AsamTabsRootContext, AsamTabsTabPaneName, AsamTabsPaneContext, AsamTabsTabNavInstance } from '@asam-ui/ui';

// AsamTabsRootContext
type PublicContract = {
	"props": AsamTabsRootContext["props"];
	"currentName": Ref<AsamTabsTabPaneName, AsamTabsTabPaneName>;
	"registerPane": (pane: AsamTabsPaneContext) => void;
	"unregisterPane": (pane: AsamTabsPaneContext) => void;
	"nav$": Ref<AsamTabsTabNavInstance | undefined, AsamTabsTabNavInstance | undefined>;
};

标签页 AsamTabs

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

完整使用场景 ​

基础用法 ​

基础用法

卡片风格的标签 ​

卡片风格的标签

带有边框的卡片风格 ​

带有边框的卡片风格

标签位置的设置 ​

标签位置的设置

自定义标签页的内容 ​

自定义标签页的内容

动态增减标签页 ​

动态增减标签页

添加按钮自定义图标 2.4.0 ​

添加按钮自定义图标 2.4.0

增加标签页触发器自定义 ​

增加标签页触发器自定义

默认值2.11.9 ​

默认值

触摸、键盘与嵌套实例 ​

触摸、键盘与嵌套实例

API

类型 AsamTabValue

类型 AsamTabItem

属性 AsamTabsProps

事件 AsamTabsEmits

插槽 AsamTabsSlots

实例方法与状态 AsamTabsExpose

类型 AsamTabsInstance

类型 AsamTabsTabBarInstance

类型 AsamTabsTabBarProps

类型 AsamTabsTabBarPropsPublic

类型 AsamTabsTabNavEmits

类型 AsamTabsTabNavInstance

类型 AsamTabsTabNavProps

类型 AsamTabsTabNavPropsPublic

类型 AsamTabsTabPaneInstance

类型 AsamTabsTabPaneName

类型 AsamTabsTabPaneProps

类型 AsamTabsTabPanePropsPublic

类型 AsamTabsPaneContext

类型 AsamTabsPanes

类型 AsamTabsPropsPublic

类型 AsamTabsRootContext

用法与契约补充说明 ​

使用约定 ​

关联组件

参数与事件说明

label

value

disabled

count

参数与事件说明

items

默认值与来源

tabindex

默认值与来源

stretch

默认值与来源

type

默认值与来源

modelValue

默认值与来源

closable

默认值与来源

addable

默认值与来源

defaultValue

默认值与来源

editable

默认值与来源

tabPosition

默认值与来源

beforeLeave

默认值与来源

使用场景

基础用法与状态

使用约定

完整使用场景

基础用法

卡片风格的标签

带有边框的卡片风格

标签位置的设置

自定义标签页的内容

动态增减标签页

添加按钮自定义图标 2.4.0

增加标签页触发器自定义

默认值2.11.9

触摸、键盘与嵌套实例

类型 `AsamTabValue`

类型 `AsamTabItem`

属性 `AsamTabsProps`

事件 `AsamTabsEmits`

插槽 `AsamTabsSlots`

实例方法与状态 `AsamTabsExpose`

类型 `AsamTabsInstance`

类型 `AsamTabsTabBarInstance`

类型 `AsamTabsTabBarProps`

类型 `AsamTabsTabBarPropsPublic`

类型 `AsamTabsTabNavEmits`

类型 `AsamTabsTabNavInstance`

类型 `AsamTabsTabNavProps`

类型 `AsamTabsTabNavPropsPublic`

类型 `AsamTabsTabPaneInstance`

类型 `AsamTabsTabPaneName`

类型 `AsamTabsTabPaneProps`

类型 `AsamTabsTabPanePropsPublic`

类型 `AsamTabsPaneContext`

类型 `AsamTabsPanes`

类型 `AsamTabsPropsPublic`

类型 `AsamTabsRootContext`

用法与契约补充说明

使用约定

`label`

`value`

`disabled`

`count`

`items`

`tabindex`

`stretch`

`type`

`modelValue`

`closable`

`addable`

`defaultValue`

`editable`

`tabPosition`

`beforeLeave`

`update:modelValue`

`tabClick`

`tabChange`

`edit`

`tabRemove`

`tabAdd`

`change`

`default`

`label`

`add-icon`

`currentName`

`tabNavRef`

`currentName`

`tabNavRef`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`