选择项 AsamOption

组件关系

作为选择器的子组件使用，不能独立提供选择功能。需要组织选项时使用选择项分组。

使用场景

为 Select 的默认插槽提供原始值选项。value 是选择身份，label 是输入框回显，default 插槽可显示更丰富内容。

分组与显示内容

Select 使用 valueMode=native 消费原始 Option。默认插槽内容负责菜单展示，label 保持简洁的选中回显。

分组与显示内容

vue

<template>
	<div class="example">
		<AsamSelect
			v-model="value"
			v-bind="{
				'value-mode': 'native',
				clearable: true,
				filterable: true,
				'aria-label': '团队'
			}"
		>
			<AsamOptionGroup label="可用团队">
				<AsamOption label="设计" value="design">
					<span> 设计团队 · 视觉 </span>
				</AsamOption>
				<AsamOption label="开发" value="dev">
					<span> 开发团队 · 工程 </span>
				</AsamOption>
			</AsamOptionGroup>
			<AsamOptionGroup label="停用团队" disabled>
				<AsamOption label="停用" value="off" />
			</AsamOptionGroup>
		</AsamSelect>
		<output>原始值：{{ value }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamOptionBasicExample' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';
const value = ref<string | null>('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<AsamSelect
			v-model="value"
			v-bind="{
				'value-mode': 'native',
				clearable: true,
				filterable: true,
				'aria-label': '团队'
			}"
		>
			<AsamOptionGroup label="可用团队">
				<AsamOption label="设计" value="design">
					<span> 设计团队 · 视觉 </span>
				</AsamOption>
				<AsamOption label="开发" value="dev">
					<span> 开发团队 · 工程 </span>
				</AsamOption>
			</AsamOptionGroup>
			<AsamOptionGroup label="停用团队" disabled>
				<AsamOption label="停用" value="off" />
			</AsamOptionGroup>
		</AsamSelect>
		<output>原始值：{{ value }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamOptionBasicExample' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';
const value = ref('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

原始对象与唯一键

原始对象值通过 Select.valueKey 定位；这与 ASAM valueMode=object 的规范化 option 模型不同。多文件 data 保持实际业务对象完整。

原始对象与唯一键

vue

<template><StandaloneDemo /></template>

<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "example" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const data_js_1: any = require("./data.js");
exports.default = (0, vue_1.defineComponent)({
    ...{ name: 'AsamOptionObjectsExample' },
    __name: 'Demo',
    setup(__props?: any) {
        const value: any = (0, vue_3.ref)(data_js_1.teams[0]);
        return (_ctx?: any, _cache?: any) => {
            return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
                (0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
                    modelValue: value.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event)),
                    "value-mode": "native",
                    "value-key": "id"
                }, {
                    default: (0, vue_2.withCtx)(() => [
                        (0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOptionGroup), { label: "对象选项" }, {
                            default: (0, vue_2.withCtx)(() => [
                                ((0, vue_2.openBlock)(true), (0, vue_2.createElementBlock)(vue_2.Fragment, null, (0, vue_2.renderList)((0, vue_2.unref)(data_js_1.teams), (item?: any) => {
                                    return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamOption), (0, vue_2.mergeProps)({
                                        key: item.id
                                    }, { ref_for: true }, { label: item.name, value: item }), null, 16 /* FULL_PROPS */));
                                }), 128 /* KEYED_FRAGMENT */))
                            ]),
                            _: 1 /* STABLE */
                        })
                    ]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["modelValue"]),
                (0, vue_2.createElementVNode)("output", null, "对象：" + (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
            ]));
        };
    }
});

exports.default.__scopeId = "data-v-0ed584f4";
},
"data.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.teams = void 0;
exports.teams = [
    { id: 'design', name: '设计' },
    { id: 'dev', name: '开发' }
];


},
};
const __dependencies: any = {"Demo.vue":{"./data.js":"data.ts"},"data.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
 if (__external[id]) return __external[id];
 if (__cache[id]) return __cache[id].exports;
 const module: any = { exports: {} };
 __cache[id] = module;
 __modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
 return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>

<style>

.example[data-v-0ed584f4] {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}
.row[data-v-0ed584f4] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}
.density-grid[data-v-0ed584f4] {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section[data-v-0ed584f4] {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}
output[data-v-0ed584f4] {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}

</style>

vue

<template><StandaloneDemo /></template>

<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "example" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const data_js_1 = require("./data.js");
exports.default = Object.assign({ name: 'AsamOptionObjectsExample' }, {
    __name: 'Demo',
    setup(__props) {
        const value = (0, vue_2.ref)(data_js_1.teams[0]);
        return (_ctx, _cache) => {
            return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
                (0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
                    modelValue: value.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event)),
                    "value-mode": "native",
                    "value-key": "id"
                }, {
                    default: (0, vue_1.withCtx)(() => [
                        (0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOptionGroup), { label: "对象选项" }, {
                            default: (0, vue_1.withCtx)(() => [
                                ((0, vue_1.openBlock)(true), (0, vue_1.createElementBlock)(vue_1.Fragment, null, (0, vue_1.renderList)((0, vue_1.unref)(data_js_1.teams), (item) => {
                                    return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamOption), (0, vue_1.mergeProps)({
                                        key: item.id
                                    }, { ref_for: true }, { label: item.name, value: item }), null, 16 /* FULL_PROPS */));
                                }), 128 /* KEYED_FRAGMENT */))
                            ]),
                            _: 1 /* STABLE */
                        })
                    ]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["modelValue"]),
                (0, vue_1.createElementVNode)("output", null, "对象：" + (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
            ]));
        };
    }
});

exports.default.__scopeId = "data-v-292354cb";
},
"data.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.teams = void 0;
exports.teams = [
    { id: 'design', name: '设计' },
    { id: 'dev', name: '开发' }
];


},
};
const __dependencies = {"Demo.vue":{"./data.js":"data.js"},"data.js":{}};
const __cache = Object.create(null);
function __require(id) {
 if (__external[id]) return __external[id];
 if (__cache[id]) return __cache[id].exports;
 const module = { exports: {} };
 __cache[id] = module;
 __modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
 return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>

<style>

.example[data-v-292354cb] {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}
.row[data-v-292354cb] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}
.density-grid[data-v-292354cb] {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section[data-v-292354cb] {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}
output[data-v-292354cb] {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}

</style>

四档尺寸与上下文继承

四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。

四档尺寸与上下文继承

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamSelect size="large" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamSelect size="big" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamSelect size="default" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamSelect size="small" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamSelect model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamOptionSizesExample' });
import { ref } from 'vue';
import {
	AsamSelect,
	AsamOption,
	AsamOptionGroup,
	AsamConfigProvider,
	AsamButton
} from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamSelect size="large" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamSelect size="big" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamSelect size="default" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamSelect size="small" model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamSelect model-value="design" value-mode="native">
					<AsamOptionGroup label="团队">
						<AsamOption label="设计" value="design" />
						<AsamOption label="开发" value="dev" />
					</AsamOptionGroup>
				</AsamSelect>
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamOptionSizesExample' });
import { ref } from 'vue';
import {
	AsamSelect,
	AsamOption,
	AsamOptionGroup,
	AsamConfigProvider,
	AsamButton
} from '@asam-ui/ui';
const density = ref('big');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

ASAM 扩展与迁移

Option/OptionGroup 没有独立 size 属性，菜单密度由外层 Select 的四档 size 与弹层上下文决定。当前仅有 default 插槽，没有独立事件或实例方法；选择变化监听 Select.change。

API 阅读方式

下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。

API

属性 `AsamOptionProps`

属性名	说明	类型	默认值
`disabled`	是否禁用该选项	`boolean \| undefined`	`false`
`created`	—	`boolean \| undefined`	`false`
`style`	—	`unknown`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamOptionProps)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamOptionProps)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamOptionProps)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamOptionProps)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamOptionProps)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamOptionProps)["onVnodeUnmounted"]`	—
`class`	—	`unknown`	—
`value`	选项的值	`(AsamOptionProps)["value"]`	—
`label`	选项的标签，若不设置则默认与value相同	`(AsamOptionProps)["label"]`	—

插槽 `AsamOptionSlots`

属性名	说明	类型	默认值
`default`	—	`(() => unknown) \| undefined`	—

实例方法与状态 `AsamOptionExpose`

参数与事件补充说明

基础选项值支持原始值，并通过 Select 的 valueKey 支持对象值。

参数与事件说明

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

默认值与来源

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

`created`

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

created 参数与事件数据

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

枚举：false / true

默认值与来源

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

`style`

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

`key`

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

`ref`

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

ref 参数与事件数据

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

事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void

ref.value: any — 依赖声明
ref.__@RefSymbol@8854: true — 依赖声明
仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：true

`ref_for`

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

ref_for 参数与事件数据

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

枚举：false / true

`ref_key`

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

`onVnodeBeforeMount`

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

onVnodeBeforeMount 参数与事件数据

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

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

`onVnodeMounted`

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

onVnodeMounted 参数与事件数据

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

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

`onVnodeBeforeUpdate`

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

onVnodeBeforeUpdate 参数与事件数据

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

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

`onVnodeUpdated`

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

onVnodeUpdated 参数与事件数据

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

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

`onVnodeBeforeUnmount`

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

onVnodeBeforeUnmount 参数与事件数据

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

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

`onVnodeUnmounted`

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

onVnodeUnmounted 参数与事件数据

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

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

`class`

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

`value`

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

value 参数与事件数据

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

枚举：false / true

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

`label`

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

AsamOptionProps 公开类型视图

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

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

// AsamOptionProps
type PublicContract = {
	"disabled"?: boolean | undefined;
	"created"?: boolean | undefined;
	"style"?: unknown;
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamOptionProps)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamOptionProps)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamOptionProps)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamOptionProps)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamOptionProps)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamOptionProps)["onVnodeUnmounted"];
	"class"?: unknown;
	readonly "value": (AsamOptionProps)["value"];
	readonly "label"?: (AsamOptionProps)["label"];
};

参数与事件说明

`default`

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

default 参数与事件数据

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

事件参数：(): unknown

AsamOptionSlots 公开类型视图

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

// AsamOptionSlots
type PublicContract = {
	"default"?: (() => unknown) | undefined;
};

AsamOptionExpose 公开类型视图

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

// AsamOptionExpose
type PublicContract = {
	[key: string]: never;
};

选择项 AsamOption

组件关系 ​

使用场景 ​

分组与显示内容 ​

分组与显示内容

原始对象与唯一键 ​

原始对象与唯一键

四档尺寸与上下文继承 ​

四档尺寸与上下文继承

ASAM 扩展与迁移 ​

API 阅读方式 ​

API

属性 AsamOptionProps

插槽 AsamOptionSlots

实例方法与状态 AsamOptionExpose

关联组件

参数与事件说明

disabled

默认值与来源

created

默认值与来源

style

key

ref

ref_for

ref_key

onVnodeBeforeMount

onVnodeMounted

onVnodeBeforeUpdate

onVnodeUpdated

onVnodeBeforeUnmount

onVnodeUnmounted

class

value

label

参数与事件说明

default

组件关系

使用场景

分组与显示内容

原始对象与唯一键

四档尺寸与上下文继承

ASAM 扩展与迁移

API 阅读方式

属性 `AsamOptionProps`

插槽 `AsamOptionSlots`

实例方法与状态 `AsamOptionExpose`

`disabled`

`created`

`style`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`class`

`value`

`label`

`default`