全局配置 AsamConfigProvider

使用场景

向子树提供组件配置和 ASAM 控件密度。

基础用法与状态

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

基础用法与状态

vue

<template>
	<label>
		<span>继承密度</span>
		<AsamSelect v-model="size">
			<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
				value
			}}</AsamOption>
		</AsamSelect>
	</label>
	<AsamConfigProvider :size="size">
		<div class="actions">
			<AsamTag>继承 {{ size }}</AsamTag>
			<AsamTag size="small">显式 small 优先</AsamTag>
		</div>
	</AsamConfigProvider>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamConfigProviderBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamConfigProvider, AsamTag } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('default');
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}
</style>

vue

<template>
	<label>
		<span>继承密度</span>
		<AsamSelect v-model="size">
			<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
				value
			}}</AsamOption>
		</AsamSelect>
	</label>
	<AsamConfigProvider :size="size">
		<div class="actions">
			<AsamTag>继承 {{ size }}</AsamTag>
			<AsamTag size="small">显式 small 优先</AsamTag>
		</div>
	</AsamConfigProvider>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamConfigProvider, AsamTag } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}
</style>

使用约定

size 接受 large/big/default/small，省略时保留默认密度；配置变化保持响应式。完整说明。

完整使用场景

i18n 配置

通过 Config Provider 来配置多语言，让你的应用可以随时切换语言。

使用两个属性来提供 i18n 相关配置

i18n 配置

许可

vue

<template>
	<div class="demo-layout-1">
		<AsamButton type="default" class="ui032-mb-2" @click="toggle">切换语言</AsamButton>
		<br />

		<AsamConfigProvider :locale="locale">
			<div class="demo-provider-layout-1">
				<AsamTable :data="[]" class="ui032-mb-1" />
				<AsamPagination :total="100" />
			</div>
		</AsamConfigProvider>
	</div>
</template>

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

import { computed, ref } from 'vue';
import { asamLocaleZhCn as zhCn } from '@asam-ui/ui';
import { asamLocaleEn as en } from '@asam-ui/ui';

const language = ref('zh-cn');
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));

const toggle = () => {
	language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn';
};
</script>

<style scoped>
.ui032-mb-2 {
	margin-bottom: var(--asam-space-sm);
}

.ui032-mb-1 {
	margin-bottom: var(--asam-space-xs);
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

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

许可

vue

<template>
	<div class="demo-layout-1">
		<AsamButton type="default" class="ui032-mb-2" @click="toggle">切换语言</AsamButton>
		<br />

		<AsamConfigProvider :locale="locale">
			<div class="demo-provider-layout-1">
				<AsamTable :data="[]" class="ui032-mb-1" />
				<AsamPagination :total="100" />
			</div>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapUsageDemo' });
import { AsamButton, AsamConfigProvider, AsamTable, AsamPagination } from '@asam-ui/ui';
import { computed, ref } from 'vue';
import { asamLocaleZhCn as zhCn } from '@asam-ui/ui';
import { asamLocaleEn as en } from '@asam-ui/ui';
const language = ref('zh-cn');
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));
const toggle = () => {
	language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn';
};
</script>

<style scoped>
.ui032-mb-2 {
	margin-bottom: var(--asam-space-sm);
}

.ui032-mb-1 {
	margin-bottom: var(--asam-space-xs);
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

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

对按钮进行配置

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

AsamButton 的颜色类型按显式 type、最近的 AsamButtonGroup 类型、已配置的 button.type、独立默认 secondary 依次取值。Provider 类型变化会更新未被显式属性或按钮组覆盖的子按钮。

对按钮进行配置

许可

vue

<template>
	<div class="demo-layout-1">
		<div class="demo-layout-2">
			<AsamSwitch
				:model-value="config.autoInsertSpace"
				active-text="autoInsertSpace"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.autoInsertSpace = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.plain"
				active-text="plain"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.plain = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.round"
				active-text="round"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.round = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.dashed"
				active-text="dashed"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.dashed = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.text"
				active-text="text"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.text = value;
					}
				"
			/>
			<AsamSelect
				:model-value="config.type"
				class="ml-5"
				style="max-width: 150px"
				@update:model-value="
					(value: unknown) => {
						if (
							value === 'primary' ||
							value === 'success' ||
							value === 'warning' ||
							value === 'danger' ||
							value === 'info' ||
							value === 'default'
						)
							config.type = value;
					}
				"
			>
				<AsamOption v-for="type in buttonTypes.filter(Boolean)" :key="type" :value="type" />
			</AsamSelect>
		</div>
		<AsamDivider />
		<AsamConfigProvider :button="config">
			<AsamButton>中文</AsamButton>
		</AsamConfigProvider>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamConfigProviderCapButtonDemo' });
import {
	AsamSwitch,
	AsamSelect,
	AsamOption,
	AsamDivider,
	AsamConfigProvider,
	AsamButton
} from '@asam-ui/ui';

import { reactive } from 'vue';
const buttonTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'] as const;

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

const config = reactive<AsamConfigProviderButtonConfigContext>({
	autoInsertSpace: true,
	type: 'default',
	plain: true,
	round: true,
	text: false,
	dashed: false
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-5 {
	margin-left: 1.25rem;
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
.demo-layout-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

许可

vue

<template>
	<div class="demo-layout-1">
		<div class="demo-layout-2">
			<AsamSwitch
				:model-value="config.autoInsertSpace"
				active-text="autoInsertSpace"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.autoInsertSpace = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.plain"
				active-text="plain"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.plain = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.round"
				active-text="round"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.round = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.dashed"
				active-text="dashed"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.dashed = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.text"
				active-text="text"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.text = value;
					}
				"
			/>
			<AsamSelect
				:model-value="config.type"
				class="ml-5"
				style="max-width: 150px"
				@update:model-value="
					(value) => {
						if (
							value === 'primary' ||
							value === 'success' ||
							value === 'warning' ||
							value === 'danger' ||
							value === 'info' ||
							value === 'default'
						)
							config.type = value;
					}
				"
			>
				<AsamOption v-for="type in buttonTypes.filter(Boolean)" :key="type" :value="type" />
			</AsamSelect>
		</div>
		<AsamDivider />
		<AsamConfigProvider :button="config">
			<AsamButton>中文</AsamButton>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapButtonDemo' });
import {
	AsamSwitch,
	AsamSelect,
	AsamOption,
	AsamDivider,
	AsamConfigProvider,
	AsamButton
} from '@asam-ui/ui';
import { reactive } from 'vue';
const buttonTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'];
const config = reactive({
	autoInsertSpace: true,
	type: 'default',
	plain: true,
	round: true,
	text: false,
	dashed: false
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-5 {
	margin-left: 1.25rem;
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
.demo-layout-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

对链接进行配置2.9.11

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

对链接进行配置2.9.11

许可

vue

<template>
	<div>
		<div class="flex gap-4">
			<div class="flex flex-col basis-150px demo-gap">
				<span>类型：</span>
				<AsamSelect
					:model-value="config.type"
					@update:model-value="
						(value: unknown) => {
							if (
								value === 'primary' ||
								value === 'success' ||
								value === 'warning' ||
								value === 'danger' ||
								value === 'info' ||
								value === 'default'
							)
								config.type = value;
						}
					"
				>
					<AsamOption v-for="type in linkTypes" :key="type" :value="type" />
				</AsamSelect>
			</div>
			<div class="flex flex-col basis-150px demo-gap">
				<span>下划线：</span>
				<AsamSelect
					:model-value="config.underline"
					@update:model-value="
						(value: unknown) => {
							if (value === 'always' || value === 'hover' || value === 'never')
								config.underline = value;
						}
					"
				>
					<AsamOption v-for="type in underlineOptions" :key="type" :value="type" />
				</AsamSelect>
			</div>
		</div>
		<AsamDivider />
		<AsamConfigProvider :link="config">
			<AsamLink>链接示例</AsamLink>
		</AsamConfigProvider>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamConfigProviderCapLinkDemo' });
import { AsamSelect, AsamOption, AsamDivider, AsamConfigProvider, AsamLink } from '@asam-ui/ui';

import { reactive } from 'vue';

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

const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default'];
const underlineOptions = ['always', 'never', 'hover'];

const config = reactive<AsamConfigProviderLinkConfigContext>({
	type: 'success',
	underline: 'always'
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.gap-4 {
	gap: 1rem;
}

.flex-col {
	flex-direction: column;
}

.basis-150px {
	flex-basis: 150px;
}

.demo-gap {
	gap: var(--asam-space-sm);
}
</style>

许可

vue

<template>
	<div>
		<div class="flex gap-4">
			<div class="flex flex-col basis-150px demo-gap">
				<span>类型：</span>
				<AsamSelect
					:model-value="config.type"
					@update:model-value="
						(value) => {
							if (
								value === 'primary' ||
								value === 'success' ||
								value === 'warning' ||
								value === 'danger' ||
								value === 'info' ||
								value === 'default'
							)
								config.type = value;
						}
					"
				>
					<AsamOption v-for="type in linkTypes" :key="type" :value="type" />
				</AsamSelect>
			</div>
			<div class="flex flex-col basis-150px demo-gap">
				<span>下划线：</span>
				<AsamSelect
					:model-value="config.underline"
					@update:model-value="
						(value) => {
							if (value === 'always' || value === 'hover' || value === 'never')
								config.underline = value;
						}
					"
				>
					<AsamOption v-for="type in underlineOptions" :key="type" :value="type" />
				</AsamSelect>
			</div>
		</div>
		<AsamDivider />
		<AsamConfigProvider :link="config">
			<AsamLink>链接示例</AsamLink>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapLinkDemo' });
import { AsamSelect, AsamOption, AsamDivider, AsamConfigProvider, AsamLink } from '@asam-ui/ui';
import { reactive } from 'vue';
const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default'];
const underlineOptions = ['always', 'never', 'hover'];
const config = reactive({
	type: 'success',
	underline: 'always'
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.gap-4 {
	gap: 1rem;
}

.flex-col {
	flex-direction: column;
}

.basis-150px {
	flex-basis: 150px;
}

.demo-gap {
	gap: var(--asam-space-sm);
}
</style>

对 Card 进行配置 2.10.5

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

对 Card 进行配置 2.10.5

许可

vue

<template>
	阴影：
	<div class="flex flex-col justify-center">
		<AsamRadioGroup
			:model-value="config.shadow"
			@update:model-value="
				(value) => {
					if (value === 'always' || value === 'hover' || value === 'never')
						config.shadow = value;
				}
			"
		>
			<AsamRadioItem value="always">always</AsamRadioItem>
			<AsamRadioItem value="hover">hover</AsamRadioItem>
			<AsamRadioItem value="never">never</AsamRadioItem>
		</AsamRadioGroup>
		<AsamDivider />
		<AsamConfigProvider :card="config">
			<AsamCard>卡片示例</AsamCard>
		</AsamConfigProvider>
	</div>
</template>

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

import { reactive } from 'vue';

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

const config = reactive<AsamConfigProviderCardConfigContext>({
	shadow: 'always'
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.justify-center {
	justify-content: center;
}
</style>

许可

vue

<template>
	阴影：
	<div class="flex flex-col justify-center">
		<AsamRadioGroup
			:model-value="config.shadow"
			@update:model-value="
				(value) => {
					if (value === 'always' || value === 'hover' || value === 'never')
						config.shadow = value;
				}
			"
		>
			<AsamRadioItem value="always">always</AsamRadioItem>
			<AsamRadioItem value="hover">hover</AsamRadioItem>
			<AsamRadioItem value="never">never</AsamRadioItem>
		</AsamRadioGroup>
		<AsamDivider />
		<AsamConfigProvider :card="config">
			<AsamCard>卡片示例</AsamCard>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapCardDemo' });
import {
	AsamRadioGroup,
	AsamRadioItem,
	AsamDivider,
	AsamConfigProvider,
	AsamCard
} from '@asam-ui/ui';
import { reactive } from 'vue';
const config = reactive({
	shadow: 'always'
});
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.justify-center {
	justify-content: center;
}
</style>

对 Dialog 进行配置 2.10.7

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

对 Dialog 进行配置 2.10.7

许可

vue

<template>
	<div class="flex flex-col gap-4 justify-center">
		<div class="flex items-center gap-2">
			<AsamSwitch
				:model-value="config.alignCenter"
				active-text="alignCenter"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.alignCenter = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-4">
			<AsamSwitch
				:model-value="config.draggable"
				active-text="draggable"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.draggable = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.overflow"
				:disabled="!config.draggable"
				active-text="overflow"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.overflow = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-2">
			<AsamSwitch
				:model-value="enableTransition"
				active-text="启用过渡效果"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') enableTransition = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="isObjectTransition"
				:disabled="!enableTransition"
				active-text="transition: object"
				inactive-text="transition: string"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') isObjectTransition = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-2">
			<!-- prettier-ignore -->
			<AsamButton
				ref="buttonRef"
			 type="default"
				size="small"
				@click="visible = true"
			>
				打开对话框
			</AsamButton>
		</div>
		<AsamConfigProvider :dialog="globalConfig">
			<AsamDialog v-model="visible" title="对话框标题" destroy-on-close>
				对话框内容
			</AsamDialog>
		</AsamConfigProvider>
		<div v-if="enableTransition" class="text-xs opacity-70">
			<div v-if="isObjectTransition">
				使用 JavaScript 控制动画：
				<code>{{ JSON.stringify(globalConfig.transition) }}</code>
			</div>
			<div v-else>
				使用字符串过渡名称：
				<code>{{ globalConfig.transition }}</code>
			</div>
		</div>
	</div>
</template>

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

import { computed, nextTick, ref, shallowReactive } from 'vue';

import type { AsamButtonExpose, AsamConfigProviderProps } from '@asam-ui/ui';

type GlobalConfig = {
	alignCenter: boolean;
	draggable: boolean;
	overflow: boolean;
	transition?: NonNullable<AsamConfigProviderProps['dialog']>['transition'];
};

const config = shallowReactive<GlobalConfig>({
	alignCenter: false,
	draggable: false,
	overflow: false
});
const visible = ref(false);
const enableTransition = ref(false);
const isObjectTransition = ref(false);

const buttonRef = ref<AsamButtonExpose>();

const ANIMATION_DURATION = 300;

const globalConfig = computed<GlobalConfig>(() => {
	let transition: NonNullable<AsamConfigProviderProps['dialog']>['transition'] | undefined;
	if (enableTransition.value) {
		if (isObjectTransition.value) {
			transition = {
				css: false,
				onBeforeEnter(el) {
					nextTick(() => {
						if (buttonRef.value) {
							const buttonRect = buttonRef.value.ref!.getBoundingClientRect();
							const dialogEl = el.querySelector('.el-dialog') as HTMLElement;

							if (dialogEl) {
								const dialogRect = dialogEl.getBoundingClientRect();

								const offsetX =
									buttonRect.left +
									buttonRect.width / 2 -
									(dialogRect.left + dialogRect.width / 2);
								const offsetY =
									buttonRect.top +
									buttonRect.height / 2 -
									(dialogRect.top + dialogRect.height / 2);

								dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;
								dialogEl.style.opacity = '0';
							}
						}
					});
				},
				onEnter(el, done) {
					nextTick(() => {
						const dialogEl = el.querySelector('.el-dialog') as HTMLElement;
						if (dialogEl) {
							// force reflow
							void dialogEl.offsetHeight;

							dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;
							dialogEl.style.transform = 'translate(0, 0) scale(1)';
							dialogEl.style.opacity = '1';

							// wait for animation to complete, then cleanup inline styles to avoid affecting drag
							setTimeout(() => {
								dialogEl.style.transition = '';
								dialogEl.style.transform = '';
								dialogEl.style.opacity = '';
								done();
							}, ANIMATION_DURATION);
						} else {
							done();
						}
					});
				},
				onLeave(el, done) {
					const dialogEl = el.querySelector('.el-dialog') as HTMLElement;
					if (dialogEl) {
						if (buttonRef.value) {
							const buttonRect = buttonRef.value.ref!.getBoundingClientRect();
							const dialogRect = dialogEl.getBoundingClientRect();

							const currentTransform = dialogEl.style.transform;
							let dragOffsetX = 0;
							let dragOffsetY = 0;

							// avoid draggable effect
							if (currentTransform) {
								const translateMatch = currentTransform.match(
									/translate\(([^,]+),\s*([^)]+)\)/
								);
								if (translateMatch) {
									dragOffsetX = Number.parseFloat(translateMatch[1]);
									dragOffsetY = Number.parseFloat(translateMatch[2]);
								}
							}

							const offsetX =
								buttonRect.left +
								buttonRect.width / 2 -
								(dialogRect.left + dialogRect.width / 2) +
								dragOffsetX;
							const offsetY =
								buttonRect.top +
								buttonRect.height / 2 -
								(dialogRect.top + dialogRect.height / 2) +
								dragOffsetY;

							dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;
							dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;
							dialogEl.style.opacity = '0';

							// wait for animation to complete, then cleanup inline styles
							setTimeout(() => {
								dialogEl.style.transition = '';
								dialogEl.style.transform = '';
								dialogEl.style.opacity = '';
								done();
							}, ANIMATION_DURATION);
						} else {
							done();
						}
					} else {
						done();
					}
				}
			};
		} else {
			transition = 'dialog-bounce';
		}
	}
	return {
		alignCenter: config.alignCenter,
		draggable: config.draggable,
		overflow: config.overflow,
		transition
	};
});
</script>

<style>
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
	opacity: 0;
}

.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
	transform: scale(0.3) translateY(-50px);
	opacity: 0;
}
</style>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.gap-4 {
	gap: 1rem;
}

.justify-center {
	justify-content: center;
}

.items-center {
	align-items: center;
}

.gap-2 {
	gap: 0.5rem;
}

.text-xs {
	font-size: var(--el-font-size-extra-small);
}

.opacity-70 {
	opacity: 0.7;
}
</style>

许可

vue

<template>
	<div class="flex flex-col gap-4 justify-center">
		<div class="flex items-center gap-2">
			<AsamSwitch
				:model-value="config.alignCenter"
				active-text="alignCenter"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.alignCenter = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-4">
			<AsamSwitch
				:model-value="config.draggable"
				active-text="draggable"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.draggable = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="config.overflow"
				:disabled="!config.draggable"
				active-text="overflow"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.overflow = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-2">
			<AsamSwitch
				:model-value="enableTransition"
				active-text="启用过渡效果"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') enableTransition = value;
					}
				"
			/>
			<AsamSwitch
				:model-value="isObjectTransition"
				:disabled="!enableTransition"
				active-text="transition: object"
				inactive-text="transition: string"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') isObjectTransition = value;
					}
				"
			/>
		</div>
		<div class="flex items-center gap-2">
			<!-- prettier-ignore -->
			<AsamButton
				ref="buttonRef"
			 type="default"
				size="small"
				@click="visible = true"
			>
				打开对话框
			</AsamButton>
		</div>
		<AsamConfigProvider :dialog="globalConfig">
			<AsamDialog v-model="visible" title="对话框标题" destroy-on-close>
				对话框内容
			</AsamDialog>
		</AsamConfigProvider>
		<div v-if="enableTransition" class="text-xs opacity-70">
			<div v-if="isObjectTransition">
				使用 JavaScript 控制动画：
				<code>{{ JSON.stringify(globalConfig.transition) }}</code>
			</div>
			<div v-else>
				使用字符串过渡名称：
				<code>{{ globalConfig.transition }}</code>
			</div>
		</div>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapDialogDemo' });
import { AsamSwitch, AsamButton, AsamConfigProvider, AsamDialog } from '@asam-ui/ui';
import { computed, nextTick, ref, shallowReactive } from 'vue';
const config = shallowReactive({
	alignCenter: false,
	draggable: false,
	overflow: false
});
const visible = ref(false);
const enableTransition = ref(false);
const isObjectTransition = ref(false);
const buttonRef = ref();
const ANIMATION_DURATION = 300;
const globalConfig = computed(() => {
	let transition;
	if (enableTransition.value) {
		if (isObjectTransition.value) {
			transition = {
				css: false,
				onBeforeEnter(el) {
					nextTick(() => {
						if (buttonRef.value) {
							const buttonRect = buttonRef.value.ref.getBoundingClientRect();
							const dialogEl = el.querySelector('.el-dialog');
							if (dialogEl) {
								const dialogRect = dialogEl.getBoundingClientRect();
								const offsetX =
									buttonRect.left +
									buttonRect.width / 2 -
									(dialogRect.left + dialogRect.width / 2);
								const offsetY =
									buttonRect.top +
									buttonRect.height / 2 -
									(dialogRect.top + dialogRect.height / 2);
								dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;
								dialogEl.style.opacity = '0';
							}
						}
					});
				},
				onEnter(el, done) {
					nextTick(() => {
						const dialogEl = el.querySelector('.el-dialog');
						if (dialogEl) {
							// force reflow
							void dialogEl.offsetHeight;
							dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;
							dialogEl.style.transform = 'translate(0, 0) scale(1)';
							dialogEl.style.opacity = '1';
							// wait for animation to complete, then cleanup inline styles to avoid affecting drag
							setTimeout(() => {
								dialogEl.style.transition = '';
								dialogEl.style.transform = '';
								dialogEl.style.opacity = '';
								done();
							}, ANIMATION_DURATION);
						} else {
							done();
						}
					});
				},
				onLeave(el, done) {
					const dialogEl = el.querySelector('.el-dialog');
					if (dialogEl) {
						if (buttonRef.value) {
							const buttonRect = buttonRef.value.ref.getBoundingClientRect();
							const dialogRect = dialogEl.getBoundingClientRect();
							const currentTransform = dialogEl.style.transform;
							let dragOffsetX = 0;
							let dragOffsetY = 0;
							// avoid draggable effect
							if (currentTransform) {
								const translateMatch = currentTransform.match(
									/translate\(([^,]+),\s*([^)]+)\)/
								);
								if (translateMatch) {
									dragOffsetX = Number.parseFloat(translateMatch[1]);
									dragOffsetY = Number.parseFloat(translateMatch[2]);
								}
							}
							const offsetX =
								buttonRect.left +
								buttonRect.width / 2 -
								(dialogRect.left + dialogRect.width / 2) +
								dragOffsetX;
							const offsetY =
								buttonRect.top +
								buttonRect.height / 2 -
								(dialogRect.top + dialogRect.height / 2) +
								dragOffsetY;
							dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;
							dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;
							dialogEl.style.opacity = '0';
							// wait for animation to complete, then cleanup inline styles
							setTimeout(() => {
								dialogEl.style.transition = '';
								dialogEl.style.transform = '';
								dialogEl.style.opacity = '';
								done();
							}, ANIMATION_DURATION);
						} else {
							done();
						}
					} else {
						done();
					}
				}
			};
		} else {
			transition = 'dialog-bounce';
		}
	}
	return {
		alignCenter: config.alignCenter,
		draggable: config.draggable,
		overflow: config.overflow,
		transition
	};
});
</script>

<style>
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
	opacity: 0;
}

.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
	transform: scale(0.3) translateY(-50px);
	opacity: 0;
}
</style>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.gap-4 {
	gap: 1rem;
}

.justify-center {
	justify-content: center;
}

.items-center {
	align-items: center;
}

.gap-2 {
	gap: 0.5rem;
}

.text-xs {
	font-size: var(--el-font-size-extra-small);
}

.opacity-70 {
	opacity: 0.7;
}
</style>

对消息进行配置

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

对消息进行配置

许可

vue

<template>
	<div>
		<AsamConfigProvider :message="config">
			<AsamButton type="default" @click="open">打开</AsamButton>
		</AsamConfigProvider>
	</div>
</template>

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

import { reactive } from 'vue';
import { AsamMessage } from '@asam-ui/ui';

const config = reactive({
	max: 3,
	plain: true,
	placement: 'bottom'
});

const open = () => {
	AsamMessage('这是一条显示在底部的消息。');
};
</script>

许可

vue

<template>
	<div>
		<AsamConfigProvider :message="config">
			<AsamButton type="default" @click="open">打开</AsamButton>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapMessageDemo' });
import { AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import { reactive } from 'vue';
import { AsamMessage } from '@asam-ui/ui';
const config = reactive({
	max: 3,
	plain: true,
	placement: 'bottom'
});
const open = () => {
	AsamMessage('这是一条显示在底部的消息。');
};
</script>

空值配置2.7.0

支持的组件列表

级联选择器（AsamCascader）
颜色选择器（AsamColorPicker） ^(2.10.3)
日期选择器（AsamDatePicker）
选择器（AsamSelect）
虚拟化选择器（AsamSelectV2）
时间选择器（AsamTimePicker）
时间选择（AsamTimeSelect）
树形选择器（AsamTreeSelect）

设置 empty-values 来配置组件的默认空值。默认值是 ['', null, undefined]。如果认为空字符串不是一个空值，可以设置成 [undefined, null]。

设置 value-on-clear 以设置清空选项的值。组件默认值是 undefined。在日期组件中是 null。如果想设置成 undefined，请使用 () => undefined。

native 模式保留原生清空值；默认 value 模式将单选 undefined 归一为 null。完整说明。

空值配置2.7.0

许可

vue

<template>
	<AsamConfigProvider :value-on-clear="null" :empty-values="[undefined, null]">
		<div class="flex flex-wrap gap-4 items-center">
			<AsamSelect
				:model-value="value1"
				clearable
				placeholder="选择"
				style="width: 240px"
				@update:model-value="
					(value: unknown) => {
						if (typeof value === 'string' || value === null) value1 = value;
					}
				"
				@change="handleChange"
			>
				<AsamOption
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</AsamSelect>
			<AsamSelectV2
				:model-value="value2"
				value-mode="native"
				clearable
				placeholder="选择"
				style="width: 240px"
				:options="options"
				:value-on-clear="() => undefined"
				@update:model-value="
					(value: unknown) => {
						if (typeof value === 'string' || value === undefined) value2 = value;
					}
				"
				@change="handleChange"
			/>
		</div>
	</AsamConfigProvider>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamConfigProviderCapEmptyValuesDemo' });
import { AsamConfigProvider, AsamSelect, AsamOption, AsamSelectV2 } from '@asam-ui/ui';

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

const value1 = ref<string | null>('');
const value2 = ref<string | undefined>('');
const options = [
	{
		value: '',
		label: '全部'
	},
	{
		value: 'Option1',
		label: '选项 1'
	},
	{
		value: 'Option2',
		label: '选项 2'
	},
	{
		value: 'Option3',
		label: '选项 3'
	},
	{
		value: 'Option4',
		label: '选项 4'
	},
	{
		value: 'Option5',
		label: '选项 5'
	}
];

const handleChange = (value: unknown) => {
	if (value === undefined || value === null) {
		AsamMessage.info(`清空后的值为：${value}`);
	}
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.gap-4 {
	gap: 1rem;
}

.items-center {
	align-items: center;
}
</style>

许可

vue

<template>
	<AsamConfigProvider :value-on-clear="null" :empty-values="[undefined, null]">
		<div class="flex flex-wrap gap-4 items-center">
			<AsamSelect
				:model-value="value1"
				clearable
				placeholder="选择"
				style="width: 240px"
				@update:model-value="
					(value) => {
						if (typeof value === 'string' || value === null) value1 = value;
					}
				"
				@change="handleChange"
			>
				<AsamOption
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</AsamSelect>
			<AsamSelectV2
				:model-value="value2"
				value-mode="native"
				clearable
				placeholder="选择"
				style="width: 240px"
				:options="options"
				:value-on-clear="() => undefined"
				@update:model-value="
					(value) => {
						if (typeof value === 'string' || value === undefined) value2 = value;
					}
				"
				@change="handleChange"
			/>
		</div>
	</AsamConfigProvider>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapEmptyValuesDemo' });
import { AsamConfigProvider, AsamSelect, AsamOption, AsamSelectV2 } from '@asam-ui/ui';
import { ref } from 'vue';
import { AsamMessage } from '@asam-ui/ui';
const value1 = ref('');
const value2 = ref('');
const options = [
	{
		value: '',
		label: '全部'
	},
	{
		value: 'Option1',
		label: '选项 1'
	},
	{
		value: 'Option2',
		label: '选项 2'
	},
	{
		value: 'Option3',
		label: '选项 3'
	},
	{
		value: 'Option4',
		label: '选项 4'
	},
	{
		value: 'Option5',
		label: '选项 5'
	}
];
const handleChange = (value) => {
	if (value === undefined || value === null) {
		AsamMessage.info(`清空后的值为：${value}`);
	}
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.gap-4 {
	gap: 1rem;
}

.items-center {
	align-items: center;
}
</style>

表格配置 2.13.3

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

表格配置 2.13.3

许可

vue

<template>
	<div class="demo-layout-1">
		<div class="demo-layout-2">
			<AsamSwitch
				:model-value="config.showOverflowTooltip"
				active-text="showOverflowTooltip"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.showOverflowTooltip = value;
					}
				"
			/>
			<AsamSelect
				:model-value="config.tooltipEffect"
				class="ml-5"
				style="max-width: 150px"
				@update:model-value="
					(value: unknown) => {
						if (value === 'dark' || value === 'light') config.tooltipEffect = value;
					}
				"
			>
				<AsamOption value="dark" label="dark" />
				<AsamOption value="light" label="light" />
			</AsamSelect>
		</div>
		<AsamDivider />
		<AsamConfigProvider :table="config">
			<AsamTable :data="tableData" style="width: 100%">
				<!-- @vue-generic {User} -->
				<AsamTableColumn type="selection" width="55" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn label="日期" width="120">
					<template #default="scope">{{ scope.row.date }}</template>
				</AsamTableColumn>
				<!-- @vue-generic {User} -->
				<AsamTableColumn property="name" label="姓名" width="120" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn property="address" label="地址（继承配置提供器）" width="300" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn
					property="address"
					label="地址（显式设置 false）"
					:show-overflow-tooltip="false"
				/>
			</AsamTable>
		</AsamConfigProvider>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamConfigProviderCapTableDemo' });
import {
	AsamSwitch,
	AsamSelect,
	AsamOption,
	AsamDivider,
	AsamConfigProvider,
	AsamTable,
	AsamTableColumn
} from '@asam-ui/ui';

import { reactive } from 'vue';

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

const config = reactive<AsamConfigProviderTableConfigContext & { showOverflowTooltip: boolean }>({
	showOverflowTooltip: true,
	tooltipEffect: 'dark'
});

interface User {
	date: string;
	name: string;
	address: string;
}

const tableData: User[] = [
	{
		date: '2016-05-04',
		name: '艾琳娜·库茨纳',
		address: '萨尔州南莉莉洛尔贝格路 86c 号'
	},
	{
		date: '2016-05-03',
		name: '海伦·雅各比',
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'
	},
	{
		date: '2016-05-02',
		name: '布兰登·德克特',
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'
	},
	{
		date: '2016-05-01',
		name: '玛吉·史密斯',
		address: '爱达荷州西里卡多温莎路 23618 号'
	}
];
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-5 {
	margin-left: 1.25rem;
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
.demo-layout-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

许可

vue

<template>
	<div class="demo-layout-1">
		<div class="demo-layout-2">
			<AsamSwitch
				:model-value="config.showOverflowTooltip"
				active-text="showOverflowTooltip"
				@update:model-value="
					(value) => {
						if (typeof value === 'boolean') config.showOverflowTooltip = value;
					}
				"
			/>
			<AsamSelect
				:model-value="config.tooltipEffect"
				class="ml-5"
				style="max-width: 150px"
				@update:model-value="
					(value) => {
						if (value === 'dark' || value === 'light') config.tooltipEffect = value;
					}
				"
			>
				<AsamOption value="dark" label="dark" />
				<AsamOption value="light" label="light" />
			</AsamSelect>
		</div>
		<AsamDivider />
		<AsamConfigProvider :table="config">
			<AsamTable :data="tableData" style="width: 100%">
				<!-- @vue-generic {User} -->
				<AsamTableColumn type="selection" width="55" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn label="日期" width="120">
					<template #default="scope">{{ scope.row.date }}</template>
				</AsamTableColumn>
				<!-- @vue-generic {User} -->
				<AsamTableColumn property="name" label="姓名" width="120" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn property="address" label="地址（继承配置提供器）" width="300" />
				<!-- @vue-generic {User} -->
				<AsamTableColumn
					property="address"
					label="地址（显式设置 false）"
					:show-overflow-tooltip="false"
				/>
			</AsamTable>
		</AsamConfigProvider>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamConfigProviderCapTableDemo' });
import {
	AsamSwitch,
	AsamSelect,
	AsamOption,
	AsamDivider,
	AsamConfigProvider,
	AsamTable,
	AsamTableColumn
} from '@asam-ui/ui';
import { reactive } from 'vue';
const config = reactive({
	showOverflowTooltip: true,
	tooltipEffect: 'dark'
});
const tableData = [
	{
		date: '2016-05-04',
		name: '艾琳娜·库茨纳',
		address: '萨尔州南莉莉洛尔贝格路 86c 号'
	},
	{
		date: '2016-05-03',
		name: '海伦·雅各比',
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'
	},
	{
		date: '2016-05-02',
		name: '布兰登·德克特',
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'
	},
	{
		date: '2016-05-01',
		name: '玛吉·史密斯',
		address: '爱达荷州西里卡多温莎路 23618 号'
	}
];
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-5 {
	margin-left: 1.25rem;
}
</style>

<style scoped>
.demo-layout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
.demo-layout-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-md);
}
</style>

零层级与响应式密度

zIndex=0 是有效输入，省略配置仍继承上层值。密度按已冻结四档契约继承，显式 size 覆盖 provider。ConfigProvider default 插槽中的 config 是实际配置上下文，可响应更新。

零层级与响应式密度

vue

<template>
	<div class="demo-root-layout">
		<AsamButton
		 type="default"
			native-type="button"
			@click="size = size === 'big' ? 'small' : 'big'"
			>切换密度</AsamButton
		>
		<AsamConfigProvider :size="size" :z-index="0">
			<template #default="scope">
				<div class="demo-provider-layout-1">
					<output v-bind="domDataAttrs('data-state', 'z-index')">{{
						scope.config?.zIndex
					}}</output>
					<AsamText v-bind="domDataAttrs('data-density', 'inherited')">继承密度</AsamText>
					<AsamText size="large" v-bind="domDataAttrs('data-density', 'explicit')">
						显式密度
					</AsamText>
				</div>
			</template>
		</AsamConfigProvider>
	</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamConfigProviderBoundariesDemo' });
import { ref } from 'vue';
import { AsamButton, AsamConfigProvider, AsamText } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const size = ref<AsamControlSize>('big');

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>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
.demo-provider-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-provider-layout-1 > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamButton
		 type="default"
			native-type="button"
			@click="size = size === 'big' ? 'small' : 'big'"
			>切换密度</AsamButton
		>
		<AsamConfigProvider :size="size" :z-index="0">
			<template #default="scope">
				<div class="demo-provider-layout-1">
					<output v-bind="domDataAttrs('data-state', 'z-index')">{{
						scope.config?.zIndex
					}}</output>
					<AsamText v-bind="domDataAttrs('data-density', 'inherited')">继承密度</AsamText>
					<AsamText size="large" v-bind="domDataAttrs('data-density', 'explicit')">
						显式密度
					</AsamText>
				</div>
			</template>
		</AsamConfigProvider>
	</div>
</template>
<script setup>
defineOptions({ name: 'AsamConfigProviderBoundariesDemo' });
import { ref } from 'vue';
import { AsamButton, AsamConfigProvider, AsamText } from '@asam-ui/ui';
const size = ref('big');

const domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });
</script>

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

配置类型与本地语言包

ButtonConfigContext、CardConfigContext、LinkConfigContext、TableConfigContext 分别通过 AsamConfigProvider 前缀的公开类型表示。完整说明。

API

属性 `AsamConfigProviderProps`

属性名	说明	类型	默认值
`zIndex`	全局初始化 zIndex 的值	`number \| undefined`	—
`dialog`	对话框配置，参阅对应参数表。	`(AsamConfigProviderProps)["dialog"]`	—
`button`	按钮配置，参阅对应参数表。	`(AsamConfigProviderProps)["button"]`	—
`card`	—	`AsamCardConfigContext \| undefined`	—
`link`	链接配置，参阅对应参数表。	`AsamLinkConfigContext \| undefined`	—
`table`	表格配置，参阅对应参数表。	`AsamTableConfigContext \| undefined`	—
`emptyValues`	输入类组件空值	`unknown[] \| undefined`	—
`valueOnClear`	输入类组件清空值	`(AsamConfigProviderProps)["valueOnClear"]`	—
`a11y`	—	`(AsamConfigProviderProps)["a11y"]`	`false`
`locale`	翻译文本对象	`(AsamConfigProviderProps)["locale"]`	—
`experimentalFeatures`	将要添加的实验阶段的功能，所有功能都是默认设置为 false	`AsamConfigProviderExperimentalFeatures \| undefined`	—
`keyboardNavigation`	—	`(AsamConfigProviderProps)["keyboardNavigation"]`	`false`
`message`	消息配置，参阅对应参数表。	`AsamMessageConfigContext \| undefined`	—
`namespace`	全局组件类名称前缀 (需要配合 $namespace 使用)	`string \| undefined`	—
`size`	全局组件大小	`enum"large" \| "big" \| "default" \| "small"`完整类型：`AsamControlSize \| undefined`	—

插槽 `AsamConfigProviderSlots`

属性名	说明	类型	默认值
`default`	—	`((scope: { config: AsamConfigProviderContext \| undefined; }) => VNode[]) \| undefined`	—

事件 `AsamConfigProviderEmits`

实例方法与状态 `AsamConfigProviderExpose`

类型 `AsamConfigProviderInstance`

类型 `AsamConfigProviderContext`

属性名	说明	类型	默认值
`a11y`	—	`(AsamConfigProviderContext)["a11y"]`	—
`keyboardNavigation`	—	`(AsamConfigProviderContext)["keyboardNavigation"]`	—
`namespace`	—	`string \| undefined`	—
`zIndex`	—	`number \| undefined`	—
`size`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`(AsamConfigProviderContext)["size"]`	—
`dialog`	—	`(AsamConfigProviderContext)["dialog"]`	—
`button`	—	`(AsamConfigProviderContext)["button"]`	—
`card`	—	`AsamCardConfigContext \| undefined`	—
`link`	—	`AsamLinkConfigContext \| undefined`	—
`table`	—	`AsamTableConfigContext \| undefined`	—
`emptyValues`	—	`unknown[] \| undefined`	—
`valueOnClear`	—	`(AsamConfigProviderContext)["valueOnClear"]`	—
`locale`	—	`(AsamConfigProviderContext)["locale"]`	—
`experimentalFeatures`	—	`AsamConfigProviderExperimentalFeatures \| undefined`	—
`message`	—	`AsamMessageConfigContext \| undefined`	—

类型 `AsamConfigProviderExperimentalFeatures`

类型 `AsamConfigProviderPropsPublic`

属性名	说明	类型	默认值
`zIndex`	—	`number \| undefined`	—
`dialog`	—	`(AsamConfigProviderPropsPublic)["dialog"]`	—
`button`	—	`(AsamConfigProviderPropsPublic)["button"]`	—
`card`	—	`AsamCardConfigContext \| undefined`	—
`link`	—	`AsamLinkConfigContext \| undefined`	—
`table`	—	`AsamTableConfigContext \| undefined`	—
`emptyValues`	—	`unknown[] \| undefined`	—
`valueOnClear`	—	`(AsamConfigProviderPropsPublic)["valueOnClear"]`	—
`a11y`	—	`(AsamConfigProviderPropsPublic)["a11y"]`	—
`locale`	—	`(AsamConfigProviderPropsPublic)["locale"]`	—
`experimentalFeatures`	—	`AsamConfigProviderExperimentalFeatures \| undefined`	—
`keyboardNavigation`	—	`(AsamConfigProviderPropsPublic)["keyboardNavigation"]`	—
`message`	—	`AsamMessageConfigContext \| undefined`	—
`namespace`	—	`string \| undefined`	—
`size`	—	`enum"large" \| "big" \| "default" \| "small"`完整类型：`AsamControlSize \| undefined`	—

类型 `AsamConfigProviderButtonConfigContext`

属性名	说明	类型	默认值
`type`	—	`enum"" \| "default" \| "text" \| "primary" \| "success" \| "danger" \| "warning" \| "info"`完整类型：`"" \| "default" \| "text" \| "primary" \| "success" \| "danger" \| "warning" \| "info" \| undefined`	—
`plain`	—	`boolean \| undefined`	—
`text`	—	`boolean \| undefined`	—
`round`	—	`boolean \| undefined`	—
`dashed`	—	`boolean \| undefined`	—
`autoInsertSpace`	—	`boolean \| undefined`	—

类型 `AsamConfigProviderCardConfigContext`

属性名	说明	类型	默认值
`shadow`	—	`enum"hover" \| "always" \| "never"`完整类型：`"hover" \| "always" \| "never" \| undefined`	—

类型 `AsamConfigProviderLinkConfigContext`

属性名	说明	类型	默认值
`type`	—	`enum"default" \| "primary" \| "success" \| "danger" \| "warning" \| "info"`完整类型：`"default" \| "primary" \| "success" \| "danger" \| "warning" \| "info" \| undefined`	—
`underline`	—	`enum"hover" \| "always" \| "never"`完整类型：`boolean \| "hover" \| "always" \| "never" \| undefined`	—

类型 `AsamConfigProviderTableConfigContext`

属性名	说明	类型	默认值
`showOverflowTooltip`	—	`(AsamConfigProviderTableConfigContext)["showOverflowTooltip"]`	—
`tooltipEffect`	—	`string \| undefined`	—
`tooltipOptions`	—	`(AsamConfigProviderTableConfigContext)["tooltipOptions"]`	—
`tooltipFormatter`	—	`AsamTableOverflowTooltipFormatter<any> \| undefined`	—

用法与契约补充说明

使用约定

size 接受 large/big/default/small，省略时保留默认密度；配置变化保持响应式。子控件显式 size 优先于最近 group、Form、ConfigProvider。locale、namespace、zIndex、button、message 等配置以公开 Props 为准；它提供上下文，不直接请求业务数据。default 插槽提供真实配置上下文，无业务事件。

配置类型与本地语言包

ButtonConfigContext、CardConfigContext、LinkConfigContext、TableConfigContext 分别通过 AsamConfigProvider 前缀的公开类型表示。配置表与示例直接引用这些类型。语言示例从同一个包导入 asamLocaleEn 和 asamLocaleZhCn，既可切换 locale，也可传入符合 locale 参数的其他语言对象。

更多参数与事件说明

空值配置2.7.0

本例第二个 AsamSelectV2 使用 value-mode="native"，保留组件覆盖全局配置后清空为 undefined 的原生值语义；第一个 AsamSelect 仍按 provider 配置清空为 null。AsamSelectV2 默认的 value 模式会将单选清空的 undefined 归一为 null，需要原生清空值时显式选择 native 模式。

参数与事件补充说明

完整基础 API，并支持 ASAM 四档尺寸继承。

参数与事件说明

`zIndex`

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

默认值与来源

未知 / 未声明

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

`dialog`

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

dialog 参数与事件数据

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

dialog.alignCenter: boolean | undefined — 上游声明
是否水平垂直对齐对话框
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.draggable: boolean | undefined — 上游声明
为 Dialog 启用可拖拽功能
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.overflow: boolean | undefined — 上游声明
拖动范围可以超出可视区
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.transition: AsamDialogTransition — 上游声明
对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
- dialog.transition.name: string | undefined — 依赖声明
- dialog.transition.type: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "type"> — 依赖声明
  枚举："transition" / "animation"
- dialog.transition.css: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.duration: number | { enter: number; leave: number; } | undefined — 依赖声明
  - dialog.transition.duration.enter: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - dialog.transition.duration.leave: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- dialog.transition.enterFromClass: string | undefined — 依赖声明
- dialog.transition.enterActiveClass: string | undefined — 依赖声明
- dialog.transition.enterToClass: string | undefined — 依赖声明
- dialog.transition.appearFromClass: string | undefined — 依赖声明
- dialog.transition.appearActiveClass: string | undefined — 依赖声明
- dialog.transition.appearToClass: string | undefined — 依赖声明
- dialog.transition.leaveFromClass: string | undefined — 依赖声明
- dialog.transition.leaveActiveClass: string | undefined — 依赖声明
- dialog.transition.leaveToClass: string | undefined — 依赖声明
- dialog.transition.mode: "default" | "in-out" | "out-in" | undefined — 依赖声明
  枚举："default" / "in-out" / "out-in"
- dialog.transition.appear: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.persisted: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.onBeforeEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onBeforeEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onEnter"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onAfterEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnterCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onEnterCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onBeforeLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onLeave"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onAfterLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeaveCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onLeaveCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onBeforeAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onAppear"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onAfterAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppearCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderProps)["dialog"]>, "transition">>, "onAppearCancelled"> — 依赖声明
  事件参数：(el: Element): void

默认值与来源

未知 / 未声明

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

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

`button`

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

button 参数与事件数据

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

button.type: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
button.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.text: boolean | undefined — 上游声明
是否为文字按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.round: boolean | undefined — 上游声明
是否为圆角按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.dashed: boolean | undefined — 上游声明
是否是虚线按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.autoInsertSpace: boolean | undefined — 上游声明
两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效)
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true

默认值与来源

未知 / 未声明

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

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

`card`

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

card 参数与事件数据

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

card.shadow: "hover" | "always" | "never" | undefined — 上游声明
设置阴影显示时机
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

`link`

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

link 参数与事件数据

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

link.type: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：default（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
link.underline: boolean | "hover" | "always" | "never" | undefined — 上游声明
控制下划线是否出现
固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true / "hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

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

`table`

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

table 参数与事件数据

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

table.showOverflowTooltip: AsamConfigProviderTableConfigContext["showOverflowTooltip"] — 上游声明
当内容过长被隐藏时显示 tooltip
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipEffect: string | undefined — 上游声明
溢出的 tooltip 的 effect
固定上游文档默认：dark（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
table.tooltipOptions: AsamConfigProviderTableConfigContext["tooltipOptions"] — 上游声明
溢出提示配置，参阅提示组件参数。
固定上游文档默认：^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipFormatter: AsamTableOverflowTooltipFormatter<any> | undefined — 上游声明
使用 show-overflow-tooltip 时自定义 tooltip 内容
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: { row: any; column: AsamTableColumnCtx<any>; cellValue: any; }): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

默认值与来源

未知 / 未声明

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

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

`emptyValues`

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

默认值与来源

未知 / 未声明

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

`valueOnClear`

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

valueOnClear 参数与事件数据

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

枚举：false / true

valueOnClear.apply: (this: Function, thisArg: any, argArray?: any) => any — 依赖声明
调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：(this: Function, thisArg: any, argArray?: any): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
调用对象方法，并以另一个对象作为当前 this。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString: () => string — 依赖声明
返回函数的字符串表示。
事件参数：(): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype: any — 依赖声明
valueOnClear.length: number — 依赖声明
valueOnClear.arguments: any — 依赖声明
valueOnClear.caller: Function — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name: string — 依赖声明
返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888: (value: any) => boolean — 依赖声明
当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：(value: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

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

`a11y`

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

a11y 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`locale`

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

locale 参数与事件数据

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

locale.name: string — 上游声明
locale.el: PublicMember<NonNullable<(AsamConfigProviderProps)["locale"]>, "el"> — 上游声明

默认值与来源

未知 / 未声明

固定上游文档默认：原始表达式见机器资料（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

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

`experimentalFeatures`

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

默认值与来源

未知 / 未声明

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

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

`keyboardNavigation`

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

keyboardNavigation 参数与事件数据

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

枚举：false / true

默认值与来源

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

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

`message`

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

message 参数与事件数据

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

message.max: number | undefined — 上游声明
可同时显示的消息最大数量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.grouping: boolean | undefined — 上游声明
合并内容相同的消息，不支持 VNode 类型的消息
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.duration: number | undefined — 上游声明
显示时间，单位为毫秒。设为 0 则不会自动关闭
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.offset: number | undefined — 上游声明
Message 距离窗口顶部的偏移量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.showClose: boolean | undefined — 上游声明
是否显示关闭按钮
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.placement: string | undefined — 上游声明
消息放置位置
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

默认值与来源

未知 / 未声明

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

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

`namespace`

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

默认值与来源

未知 / 未声明

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

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

`size`

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

size 参数与事件数据

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

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

AsamConfigProviderProps 公开类型视图

import type { VNode } from 'vue';
import type { AsamConfigProviderProps, AsamConfigProviderButtonConfigContext, AsamDialogTransition, AsamCardConfigContext, AsamConfigProviderCardConfigContext, AsamLinkConfigContext, AsamConfigProviderLinkConfigContext, AsamTableConfigContext, AsamConfigProviderTableConfigContext, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx, AsamConfigProviderExperimentalFeatures, AsamMessageConfigContext, AsamControlSize } from '@asam-ui/ui';

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

// AsamConfigProviderProps
type PublicContract = {
	readonly "zIndex"?: number | undefined;
	readonly "dialog"?: (AsamConfigProviderProps)["dialog"];
	readonly "button"?: (AsamConfigProviderProps)["button"];
	readonly "card"?: AsamCardConfigContext | undefined;
	readonly "link"?: AsamLinkConfigContext | undefined;
	readonly "table"?: AsamTableConfigContext | undefined;
	readonly "emptyValues"?: unknown[] | undefined;
	readonly "valueOnClear"?: (AsamConfigProviderProps)["valueOnClear"];
	readonly "a11y"?: (AsamConfigProviderProps)["a11y"];
	readonly "locale"?: (AsamConfigProviderProps)["locale"];
	readonly "experimentalFeatures"?: AsamConfigProviderExperimentalFeatures | undefined;
	readonly "keyboardNavigation"?: (AsamConfigProviderProps)["keyboardNavigation"];
	readonly "message"?: AsamMessageConfigContext | undefined;
	readonly "namespace"?: string | undefined;
	"size"?: AsamControlSize | undefined;
};

参数与事件说明

`default`

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

default 参数与事件数据

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

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

AsamConfigProviderSlots 公开类型视图

import type { VNode } from 'vue';
import type { AsamConfigProviderSlots, AsamConfigProviderContext } from '@asam-ui/ui';

// AsamConfigProviderSlots
type PublicContract = {
	"default"?: ((scope: { config: AsamConfigProviderContext | undefined; }) => VNode[]) | undefined;
};

AsamConfigProviderEmits 公开类型视图

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

// AsamConfigProviderEmits
type PublicContract = AsamConfigProviderEmits;

AsamConfigProviderExpose 公开类型视图

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

// AsamConfigProviderExpose
type PublicContract = AsamConfigProviderExpose;

AsamConfigProviderInstance 公开类型视图

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

// AsamConfigProviderInstance
type PublicContract = AsamConfigProviderInstance;

参数与事件说明

`a11y`

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

a11y 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

`keyboardNavigation`

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

keyboardNavigation 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

`namespace`

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

默认值与来源

未知 / 未声明

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

`zIndex`

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

`size`

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

size 参数与事件数据

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

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

`dialog`

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

dialog 参数与事件数据

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

dialog.alignCenter: boolean | undefined — 上游声明
是否水平垂直对齐对话框
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.draggable: boolean | undefined — 上游声明
为 Dialog 启用可拖拽功能
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.overflow: boolean | undefined — 上游声明
拖动范围可以超出可视区
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.transition: AsamDialogTransition — 上游声明
对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
- dialog.transition.name: string | undefined — 依赖声明
- dialog.transition.type: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "type"> — 依赖声明
  枚举："transition" / "animation"
- dialog.transition.css: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.duration: number | { enter: number; leave: number; } | undefined — 依赖声明
  - dialog.transition.duration.enter: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - dialog.transition.duration.leave: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- dialog.transition.enterFromClass: string | undefined — 依赖声明
- dialog.transition.enterActiveClass: string | undefined — 依赖声明
- dialog.transition.enterToClass: string | undefined — 依赖声明
- dialog.transition.appearFromClass: string | undefined — 依赖声明
- dialog.transition.appearActiveClass: string | undefined — 依赖声明
- dialog.transition.appearToClass: string | undefined — 依赖声明
- dialog.transition.leaveFromClass: string | undefined — 依赖声明
- dialog.transition.leaveActiveClass: string | undefined — 依赖声明
- dialog.transition.leaveToClass: string | undefined — 依赖声明
- dialog.transition.mode: "default" | "in-out" | "out-in" | undefined — 依赖声明
  枚举："default" / "in-out" / "out-in"
- dialog.transition.appear: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.persisted: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.onBeforeEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onBeforeEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onEnter"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onAfterEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnterCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onEnterCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onBeforeLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onLeave"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onAfterLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeaveCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onLeaveCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onBeforeAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onAppear"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onAfterAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppearCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderContext)["dialog"]>, "transition">>, "onAppearCancelled"> — 依赖声明
  事件参数：(el: Element): void

默认值与来源

未知 / 未声明

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

`button`

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

button 参数与事件数据

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

button.type: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
button.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.text: boolean | undefined — 上游声明
是否为文字按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.round: boolean | undefined — 上游声明
是否为圆角按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.dashed: boolean | undefined — 上游声明
是否是虚线按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.autoInsertSpace: boolean | undefined — 上游声明
两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效)
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true

默认值与来源

未知 / 未声明

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

`card`

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

card 参数与事件数据

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

card.shadow: "hover" | "always" | "never" | undefined — 上游声明
设置阴影显示时机
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

`link`

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

link 参数与事件数据

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

link.type: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：default（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
link.underline: boolean | "hover" | "always" | "never" | undefined — 上游声明
控制下划线是否出现
固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true / "hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

`table`

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

table 参数与事件数据

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

table.showOverflowTooltip: AsamConfigProviderTableConfigContext["showOverflowTooltip"] — 上游声明
当内容过长被隐藏时显示 tooltip
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipEffect: string | undefined — 上游声明
溢出的 tooltip 的 effect
固定上游文档默认：dark（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
table.tooltipOptions: AsamConfigProviderTableConfigContext["tooltipOptions"] — 上游声明
溢出提示配置，参阅提示组件参数。
固定上游文档默认：^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipFormatter: AsamTableOverflowTooltipFormatter<any> | undefined — 上游声明
使用 show-overflow-tooltip 时自定义 tooltip 内容
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: { row: any; column: AsamTableColumnCtx<any>; cellValue: any; }): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

默认值与来源

未知 / 未声明

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

`emptyValues`

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

`valueOnClear`

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

valueOnClear 参数与事件数据

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

枚举：false / true

valueOnClear.apply: (this: Function, thisArg: any, argArray?: any) => any — 依赖声明
调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：(this: Function, thisArg: any, argArray?: any): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
调用对象方法，并以另一个对象作为当前 this。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString: () => string — 依赖声明
返回函数的字符串表示。
事件参数：(): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype: any — 依赖声明
valueOnClear.length: number — 依赖声明
valueOnClear.arguments: any — 依赖声明
valueOnClear.caller: Function — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name: string — 依赖声明
返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888: (value: any) => boolean — 依赖声明
当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：(value: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`locale`

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

locale 参数与事件数据

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

locale.name: string — 上游声明
locale.el: PublicMember<NonNullable<(AsamConfigProviderContext)["locale"]>, "el"> — 上游声明

默认值与来源

未知 / 未声明

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

`experimentalFeatures`

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

默认值与来源

未知 / 未声明

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

`message`

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

message 参数与事件数据

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

message.max: number | undefined — 上游声明
可同时显示的消息最大数量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.grouping: boolean | undefined — 上游声明
合并内容相同的消息，不支持 VNode 类型的消息
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.duration: number | undefined — 上游声明
显示时间，单位为毫秒。设为 0 则不会自动关闭
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.offset: number | undefined — 上游声明
Message 距离窗口顶部的偏移量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.showClose: boolean | undefined — 上游声明
是否显示关闭按钮
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.placement: string | undefined — 上游声明
消息放置位置
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

默认值与来源

未知 / 未声明

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

AsamConfigProviderContext 公开类型视图

import type { VNode } from 'vue';
import type { AsamConfigProviderContext, AsamConfigProviderProps, AsamConfigProviderButtonConfigContext, AsamDialogTransition, AsamCardConfigContext, AsamConfigProviderCardConfigContext, AsamLinkConfigContext, AsamConfigProviderLinkConfigContext, AsamTableConfigContext, AsamConfigProviderTableConfigContext, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx, AsamConfigProviderExperimentalFeatures, AsamMessageConfigContext } from '@asam-ui/ui';

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

// AsamConfigProviderContext
type PublicContract = {
	readonly "a11y"?: (AsamConfigProviderContext)["a11y"];
	readonly "keyboardNavigation"?: (AsamConfigProviderContext)["keyboardNavigation"];
	readonly "namespace"?: string | undefined;
	readonly "zIndex"?: number | undefined;
	readonly "size"?: (AsamConfigProviderContext)["size"];
	readonly "dialog"?: (AsamConfigProviderContext)["dialog"];
	readonly "button"?: (AsamConfigProviderContext)["button"];
	readonly "card"?: AsamCardConfigContext | undefined;
	readonly "link"?: AsamLinkConfigContext | undefined;
	readonly "table"?: AsamTableConfigContext | undefined;
	readonly "emptyValues"?: unknown[] | undefined;
	readonly "valueOnClear"?: (AsamConfigProviderContext)["valueOnClear"];
	readonly "locale"?: (AsamConfigProviderContext)["locale"];
	readonly "experimentalFeatures"?: AsamConfigProviderExperimentalFeatures | undefined;
	readonly "message"?: AsamMessageConfigContext | undefined;
};

AsamConfigProviderExperimentalFeatures 公开类型视图

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

// AsamConfigProviderExperimentalFeatures
type PublicContract = AsamConfigProviderExperimentalFeatures;

参数与事件说明

`zIndex`

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

`dialog`

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

dialog 参数与事件数据

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

dialog.alignCenter: boolean | undefined — 上游声明
是否水平垂直对齐对话框
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.draggable: boolean | undefined — 上游声明
为 Dialog 启用可拖拽功能
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.overflow: boolean | undefined — 上游声明
拖动范围可以超出可视区
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
dialog.transition: AsamDialogTransition — 上游声明
对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
- dialog.transition.name: string | undefined — 依赖声明
- dialog.transition.type: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "type"> — 依赖声明
  枚举："transition" / "animation"
- dialog.transition.css: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.duration: number | { enter: number; leave: number; } | undefined — 依赖声明
  - dialog.transition.duration.enter: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - dialog.transition.duration.leave: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- dialog.transition.enterFromClass: string | undefined — 依赖声明
- dialog.transition.enterActiveClass: string | undefined — 依赖声明
- dialog.transition.enterToClass: string | undefined — 依赖声明
- dialog.transition.appearFromClass: string | undefined — 依赖声明
- dialog.transition.appearActiveClass: string | undefined — 依赖声明
- dialog.transition.appearToClass: string | undefined — 依赖声明
- dialog.transition.leaveFromClass: string | undefined — 依赖声明
- dialog.transition.leaveActiveClass: string | undefined — 依赖声明
- dialog.transition.leaveToClass: string | undefined — 依赖声明
- dialog.transition.mode: "default" | "in-out" | "out-in" | undefined — 依赖声明
  枚举："default" / "in-out" / "out-in"
- dialog.transition.appear: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.persisted: boolean | undefined — 依赖声明
  枚举：false / true
- dialog.transition.onBeforeEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onBeforeEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onEnter"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterEnter: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onAfterEnter"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onEnterCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onEnterCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onBeforeLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onLeave"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterLeave: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onAfterLeave"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onLeaveCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onLeaveCancelled"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onBeforeAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onBeforeAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onAppear"> — 依赖声明
  事件参数：(el: Element, done: () => void): void
- dialog.transition.onAfterAppear: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onAfterAppear"> — 依赖声明
  事件参数：(el: Element): void
- dialog.transition.onAppearCancelled: PublicMember<NonNullable<PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["dialog"]>, "transition">>, "onAppearCancelled"> — 依赖声明
  事件参数：(el: Element): void

默认值与来源

未知 / 未声明

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

`button`

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

button 参数与事件数据

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

button.type: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
button.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.text: boolean | undefined — 上游声明
是否为文字按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.round: boolean | undefined — 上游声明
是否为圆角按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.dashed: boolean | undefined — 上游声明
是否是虚线按钮
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
button.autoInsertSpace: boolean | undefined — 上游声明
两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效)
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true

默认值与来源

未知 / 未声明

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

`card`

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

card 参数与事件数据

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

card.shadow: "hover" | "always" | "never" | undefined — 上游声明
设置阴影显示时机
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

`link`

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

link 参数与事件数据

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

link.type: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined — 上游声明
类型
固定上游文档默认：default（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
link.underline: boolean | "hover" | "always" | "never" | undefined — 上游声明
控制下划线是否出现
固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true / "hover" / "always" / "never"

默认值与来源

未知 / 未声明

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

`table`

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

table 参数与事件数据

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

table.showOverflowTooltip: AsamConfigProviderTableConfigContext["showOverflowTooltip"] — 上游声明
当内容过长被隐藏时显示 tooltip
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipEffect: string | undefined — 上游声明
溢出的 tooltip 的 effect
固定上游文档默认：dark（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
table.tooltipOptions: AsamConfigProviderTableConfigContext["tooltipOptions"] — 上游声明
溢出提示配置，参阅提示组件参数。
固定上游文档默认：^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
table.tooltipFormatter: AsamTableOverflowTooltipFormatter<any> | undefined — 上游声明
使用 show-overflow-tooltip 时自定义 tooltip 内容
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: { row: any; column: AsamTableColumnCtx<any>; cellValue: any; }): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

默认值与来源

未知 / 未声明

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

`emptyValues`

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

`valueOnClear`

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

valueOnClear 参数与事件数据

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

枚举：false / true

valueOnClear.apply: (this: Function, thisArg: any, argArray?: any) => any — 依赖声明
调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：(this: Function, thisArg: any, argArray?: any): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
调用对象方法，并以另一个对象作为当前 this。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind: (this: Function, thisArg: any, ...argArray: any[]) => any — 依赖声明
创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：(this: Function, thisArg: any, ...argArray: any[]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString: () => string — 依赖声明
返回函数的字符串表示。
事件参数：(): string
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype: any — 依赖声明
valueOnClear.length: number — 依赖声明
valueOnClear.arguments: any — 依赖声明
valueOnClear.caller: Function — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name: string — 依赖声明
返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888: (value: any) => boolean — 依赖声明
当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：(value: any): boolean
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`a11y`

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

a11y 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

`locale`

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

locale 参数与事件数据

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

locale.name: string — 上游声明
locale.el: PublicMember<NonNullable<(AsamConfigProviderPropsPublic)["locale"]>, "el"> — 上游声明

默认值与来源

未知 / 未声明

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

`experimentalFeatures`

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

默认值与来源

未知 / 未声明

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

`keyboardNavigation`

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

keyboardNavigation 参数与事件数据

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

枚举：false / true

默认值与来源

未知 / 未声明

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

`message`

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

message 参数与事件数据

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

message.max: number | undefined — 上游声明
可同时显示的消息最大数量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.grouping: boolean | undefined — 上游声明
合并内容相同的消息，不支持 VNode 类型的消息
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.duration: number | undefined — 上游声明
显示时间，单位为毫秒。设为 0 则不会自动关闭
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.offset: number | undefined — 上游声明
Message 距离窗口顶部的偏移量
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
message.showClose: boolean | undefined — 上游声明
是否显示关闭按钮
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.plain: boolean | undefined — 上游声明
是否纯色
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举：false / true
message.placement: string | undefined — 上游声明
消息放置位置
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

默认值与来源

未知 / 未声明

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

`namespace`

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

默认值与来源

未知 / 未声明

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

`size`

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

size 参数与事件数据

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

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

AsamConfigProviderPropsPublic 公开类型视图

import type { VNode } from 'vue';
import type { AsamConfigProviderPropsPublic, AsamConfigProviderProps, AsamConfigProviderButtonConfigContext, AsamDialogTransition, AsamCardConfigContext, AsamConfigProviderCardConfigContext, AsamLinkConfigContext, AsamConfigProviderLinkConfigContext, AsamTableConfigContext, AsamConfigProviderTableConfigContext, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx, AsamConfigProviderExperimentalFeatures, AsamMessageConfigContext, AsamControlSize } from '@asam-ui/ui';

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

// AsamConfigProviderPropsPublic
type PublicContract = {
	readonly "zIndex"?: number | undefined;
	readonly "dialog"?: (AsamConfigProviderPropsPublic)["dialog"];
	readonly "button"?: (AsamConfigProviderPropsPublic)["button"];
	readonly "card"?: AsamCardConfigContext | undefined;
	readonly "link"?: AsamLinkConfigContext | undefined;
	readonly "table"?: AsamTableConfigContext | undefined;
	readonly "emptyValues"?: unknown[] | undefined;
	readonly "valueOnClear"?: (AsamConfigProviderPropsPublic)["valueOnClear"];
	readonly "a11y"?: (AsamConfigProviderPropsPublic)["a11y"];
	readonly "locale"?: (AsamConfigProviderPropsPublic)["locale"];
	readonly "experimentalFeatures"?: AsamConfigProviderExperimentalFeatures | undefined;
	readonly "keyboardNavigation"?: (AsamConfigProviderPropsPublic)["keyboardNavigation"];
	readonly "message"?: AsamMessageConfigContext | undefined;
	readonly "namespace"?: string | undefined;
	"size"?: AsamControlSize | undefined;
};

参数与事件说明

`type`

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

type 参数与事件数据

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

枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"

`plain`

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

plain 参数与事件数据

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

枚举：false / true

`text`

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

text 参数与事件数据

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

枚举：false / true

`round`

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

round 参数与事件数据

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

枚举：false / true

`dashed`

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

dashed 参数与事件数据

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

枚举：false / true

`autoInsertSpace`

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

autoInsertSpace 参数与事件数据

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

枚举：false / true

AsamConfigProviderButtonConfigContext 公开类型视图

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

// AsamConfigProviderButtonConfigContext
type PublicContract = {
	"type"?: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
	"plain"?: boolean | undefined;
	"text"?: boolean | undefined;
	"round"?: boolean | undefined;
	"dashed"?: boolean | undefined;
	"autoInsertSpace"?: boolean | undefined;
};

参数与事件说明

`shadow`

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

shadow 参数与事件数据

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

枚举："hover" / "always" / "never"

AsamConfigProviderCardConfigContext 公开类型视图

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

// AsamConfigProviderCardConfigContext
type PublicContract = {
	"shadow"?: "hover" | "always" | "never" | undefined;
};

参数与事件说明

`type`

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

type 参数与事件数据

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

枚举："default" / "primary" / "success" / "danger" / "warning" / "info"

`underline`

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

underline 参数与事件数据

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

枚举：false / true / "hover" / "always" / "never"

AsamConfigProviderLinkConfigContext 公开类型视图

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

// AsamConfigProviderLinkConfigContext
type PublicContract = {
	"type"?: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
	"underline"?: boolean | "hover" | "always" | "never" | undefined;
};

参数与事件说明

`showOverflowTooltip`

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

showOverflowTooltip 参数与事件数据

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

枚举：false / true

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

`tooltipEffect`

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

`tooltipOptions`

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

tooltipOptions 参数与事件数据

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

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

`tooltipFormatter`

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

tooltipFormatter 参数与事件数据

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

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

AsamConfigProviderTableConfigContext 公开类型视图

import type { VNode } from 'vue';
import type { AsamConfigProviderTableConfigContext, AsamConfigProviderProps, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx } from '@asam-ui/ui';

// AsamConfigProviderTableConfigContext
type PublicContract = {
	"showOverflowTooltip"?: (AsamConfigProviderTableConfigContext)["showOverflowTooltip"];
	"tooltipEffect"?: string | undefined;
	"tooltipOptions"?: (AsamConfigProviderTableConfigContext)["tooltipOptions"];
	"tooltipFormatter"?: AsamTableOverflowTooltipFormatter<any> | undefined;
};

全局配置 AsamConfigProvider

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

完整使用场景 ​

i18n 配置 ​

i18n 配置

对按钮进行配置 ​

对按钮进行配置

对链接进行配置2.9.11 ​

对链接进行配置2.9.11

对 Card 进行配置 2.10.5 ​

对 Card 进行配置 2.10.5

对 Dialog 进行配置 2.10.7 ​

对 Dialog 进行配置 2.10.7

对消息进行配置 ​

对消息进行配置

空值配置2.7.0 ​

空值配置2.7.0

表格配置 2.13.3 ​

表格配置 2.13.3

零层级与响应式密度 ​

零层级与响应式密度

配置类型与本地语言包 ​

API

属性 AsamConfigProviderProps

插槽 AsamConfigProviderSlots

事件 AsamConfigProviderEmits

实例方法与状态 AsamConfigProviderExpose

类型 AsamConfigProviderInstance

类型 AsamConfigProviderContext

类型 AsamConfigProviderExperimentalFeatures

类型 AsamConfigProviderPropsPublic

类型 AsamConfigProviderButtonConfigContext

类型 AsamConfigProviderCardConfigContext

类型 AsamConfigProviderLinkConfigContext

类型 AsamConfigProviderTableConfigContext

用法与契约补充说明 ​

使用约定 ​

配置类型与本地语言包 ​

更多参数与事件说明 ​

空值配置2.7.0 ​

关联组件

参数与事件说明

zIndex

默认值与来源

dialog

默认值与来源

button

默认值与来源

card

默认值与来源

link

默认值与来源

table

默认值与来源

emptyValues

默认值与来源

valueOnClear

默认值与来源

a11y

默认值与来源

locale

默认值与来源

experimentalFeatures

默认值与来源

keyboardNavigation

默认值与来源

message

默认值与来源

namespace

默认值与来源

size

参数与事件说明

default

参数与事件说明

a11y

默认值与来源

keyboardNavigation

使用场景

基础用法与状态

使用约定

完整使用场景

i18n 配置

对按钮进行配置

对链接进行配置2.9.11

对 Card 进行配置 2.10.5

对 Dialog 进行配置 2.10.7

对消息进行配置

空值配置2.7.0

表格配置 2.13.3

零层级与响应式密度

配置类型与本地语言包

属性 `AsamConfigProviderProps`

插槽 `AsamConfigProviderSlots`

事件 `AsamConfigProviderEmits`

实例方法与状态 `AsamConfigProviderExpose`

类型 `AsamConfigProviderInstance`

类型 `AsamConfigProviderContext`

类型 `AsamConfigProviderExperimentalFeatures`

类型 `AsamConfigProviderPropsPublic`

类型 `AsamConfigProviderButtonConfigContext`

类型 `AsamConfigProviderCardConfigContext`

类型 `AsamConfigProviderLinkConfigContext`

类型 `AsamConfigProviderTableConfigContext`

用法与契约补充说明

使用约定

配置类型与本地语言包

更多参数与事件说明

空值配置2.7.0

`zIndex`

`dialog`

`button`

`card`

`link`

`table`

`emptyValues`

`valueOnClear`

`a11y`

`locale`

`experimentalFeatures`

`keyboardNavigation`

`message`

`namespace`

`size`

`default`

`a11y`

`keyboardNavigation`

`namespace`

`zIndex`

`size`

`dialog`

`button`

`card`

`link`

`table`

`emptyValues`

`valueOnClear`

`locale`

`experimentalFeatures`

`message`

`zIndex`

`dialog`

`button`

`card`

`link`

`table`

`emptyValues`

`valueOnClear`

`a11y`

`locale`

`experimentalFeatures`

`keyboardNavigation`

`message`

`namespace`

`size`

`type`

`plain`

`text`