使用场景
用于单选、多选与筛选静态选项。 options 使用包含 label、value、raw 的规范化选项；本组件不发起数据请求。远程与字典数据见本站对应数据组件。
单选、筛选与事件
change 反映用户提交，clear 反映清空。禁用选项不能选择；disabled 禁用整个选择器并保留已选回显。实例 focus / blur 访问实际输入。
单选、筛选与事件
<template>
<div class="example">
<AsamSelect
ref="control"
v-bind="{ clearable: true, filterable: true, 'aria-label': '团队' }"
v-model="value"
:options="options"
@change="event = 'change: ' + String($event)"
@clear="event = 'clear'"
/>
<div class="row">
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
<AsamButton type="default" @click="control?.blur()"> 失焦 </AsamButton>
</div>
<output>值：{{ value }}；{{ event }}</output>
<AsamSelect :model-value="value" :options="options" disabled aria-label="禁用选择" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSelectBasicExample' });
import { ref } from 'vue';
import { AsamSelect, AsamButton } from '@asam-ui/ui';
import type { AsamSelectExpose } from '@asam-ui/ui';
const control = ref<AsamSelectExpose>();
const value = ref<string | null>('design');
const event = ref('尚未更改');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</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><template>
<div class="example">
<AsamSelect
ref="control"
v-bind="{ clearable: true, filterable: true, 'aria-label': '团队' }"
v-model="value"
:options="options"
@change="event = 'change: ' + String($event)"
@clear="event = 'clear'"
/>
<div class="row">
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
<AsamButton type="default" @click="control?.blur()"> 失焦 </AsamButton>
</div>
<output>值：{{ value }}；{{ event }}</output>
<AsamSelect :model-value="value" :options="options" disabled aria-label="禁用选择" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSelectBasicExample' });
import { ref } from 'vue';
import { AsamSelect, AsamButton } from '@asam-ui/ui';
const control = ref();
const value = ref('design');
const event = ref('尚未更改');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</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>对象、数组与字符串存储
valueMode="object" 返回完整规范化选项。multiple 配合 array 返回数组，配合 string 与 separator 保存分隔文本；对象模式不能与字符串存储组合。数值与布尔值的字符串还原依赖选项，避免同名字符串碰撞。
multipleLimit 限制实际选中数量，删除标签后可以重新选择。示例同时展示默认折叠标签、对象清空为 null、数组和分隔字符串的实际模型。
对象、数组与字符串存储
<template>
<div class="example">
<AsamSelect
v-model="objectValue"
:options="options"
v-bind="{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }"
/>
<AsamSelect
v-model="arrayValue"
:options="options"
v-bind="{
multiple: true,
'collapse-tags': true,
'collapse-tags-tooltip': true,
'aria-label': '数组选择'
}"
/>
<AsamSelect
v-model="stringValue"
:options="options"
v-bind="{
multiple: true,
'multiple-value-mode': 'string',
separator: '|',
'aria-label': '字符串选择'
}"
/>
<AsamSelect
v-model="limitedValue"
:options="options"
multiple
:multiple-limit="1"
aria-label="最多一项"
/>
<output data-object>{{ JSON.stringify(objectValue) }}</output>
<output data-array>{{ JSON.stringify(arrayValue) }}</output>
<output data-string>{{ stringValue }}</output>
<output data-limited>{{ JSON.stringify(limitedValue) }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSelectPoliciesExample' });
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const objectValue = ref<(typeof options)[number] | null>(options[0]);
const arrayValue = ref<string[]>(['design']);
const stringValue = ref('design');
const limitedValue = ref<string[]>(['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><template>
<div class="example">
<AsamSelect
v-model="objectValue"
:options="options"
v-bind="{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }"
/>
<AsamSelect
v-model="arrayValue"
:options="options"
v-bind="{
multiple: true,
'collapse-tags': true,
'collapse-tags-tooltip': true,
'aria-label': '数组选择'
}"
/>
<AsamSelect
v-model="stringValue"
:options="options"
v-bind="{
multiple: true,
'multiple-value-mode': 'string',
separator: '|',
'aria-label': '字符串选择'
}"
/>
<AsamSelect
v-model="limitedValue"
:options="options"
multiple
:multiple-limit="1"
aria-label="最多一项"
/>
<output data-object>{{ JSON.stringify(objectValue) }}</output>
<output data-array>{{ JSON.stringify(arrayValue) }}</output>
<output data-string>{{ stringValue }}</output>
<output data-limited>{{ JSON.stringify(limitedValue) }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSelectPoliciesExample' });
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const objectValue = ref(options[0]);
const arrayValue = ref(['design']);
const stringValue = ref('design');
const limitedValue = 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>分组、原始值与插槽
valueMode="native" 使用 Option/OptionGroup 和原始值，不经过规范化存储。header/footer、prefix、label 与 empty 用于展示层。
分组、原始值与插槽
<template>
<div class="example">
<AsamSelect
v-model="value"
v-bind="{
'value-mode': 'native',
filterable: true,
clearable: true,
'aria-label': '分组选择'
}"
>
<AsamOptionGroup label="团队">
<AsamOption label="设计" value="design" />
<AsamOption label="开发" value="dev" />
</AsamOptionGroup>
<AsamOptionGroup label="停用" disabled>
<AsamOption label="不可用" value="off" />
</AsamOptionGroup>
<template #prefix> 团队 </template>
<template #header> 选择所属团队 </template>
<template #footer> 本地选项 </template>
<template #label="{ label }"> 已选 {{ label }} </template>
<template #empty> 无匹配项 </template>
</AsamSelect>
<output>值：{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSelectSlotsExample' });
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><template>
<div class="example">
<AsamSelect
v-model="value"
v-bind="{
'value-mode': 'native',
filterable: true,
clearable: true,
'aria-label': '分组选择'
}"
>
<AsamOptionGroup label="团队">
<AsamOption label="设计" value="design" />
<AsamOption label="开发" value="dev" />
</AsamOptionGroup>
<AsamOptionGroup label="停用" disabled>
<AsamOption label="不可用" value="off" />
</AsamOptionGroup>
<template #prefix> 团队 </template>
<template #header> 选择所属团队 </template>
<template #footer> 本地选项 </template>
<template #label="{ label }"> 已选 {{ label }} </template>
<template #empty> 无匹配项 </template>
</AsamSelect>
<output>值：{{ value }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSelectSlotsExample' });
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>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSelect
v-bind="{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="big">
<strong> big </strong>
<AsamSelect
v-bind="{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="default">
<strong> default </strong>
<AsamSelect
v-bind="{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="small">
<strong> small </strong>
<AsamSelect
v-bind="{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSelect model-value="design" :options="options" aria-label="尺寸选择" />
</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: 'AsamSelectSizesExample' });
import { ref } from 'vue';
import { AsamSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</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><template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSelect
v-bind="{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="big">
<strong> big </strong>
<AsamSelect
v-bind="{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="default">
<strong> default </strong>
<AsamSelect
v-bind="{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="small">
<strong> small </strong>
<AsamSelect
v-bind="{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSelect model-value="design" :options="options" aria-label="尺寸选择" />
</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: 'AsamSelectSizesExample' });
import { ref } from 'vue';
import { AsamSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</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 扩展与迁移
ASAM 扩展为四档密度、规范化 options、valueMode、multipleValueMode 与 separator。 完整说明。
对象选项创建
filterable + allowCreate 允许输入新选项。 完整说明。
选择清空不删除已创建项。clearCreatedOptions() 只重置本地集合，不修改模型；数据包装在逻辑 source/scope 改变时调用，搜索/刷新/失败时保留集合，不写 provider/cache。
普通记录与自定义实体创建
<template>
<div class="example">
<AsamSelect
v-model="record"
value-mode="object"
:options="[]"
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
placeholder="输入文本，创建普通记录"
/>
<AsamSelect
ref="custom"
v-model="people"
value-mode="object"
:options="options"
multiple
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
:create-option="createPerson"
placeholder="输入编号，创建完整实体"
/>
<AsamButton type="default" @click="record = filled">回填普通记录</AsamButton>
<AsamButton type="default" @click="custom?.clearCreatedOptions()"
>重置本地创建集合（保留模型）</AsamButton
>
<output>普通记录：{{ record }}；实体：{{ people }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelect, AsamButton } from '@asam-ui/ui';
import type { AsamOption, AsamRecord, AsamCreateOption, AsamSelectExpose } from '@asam-ui/ui';
interface Person {
id: number;
name: string;
}
const record = ref<AsamOption<string, AsamRecord> | null>(null);
const people = ref<AsamOption<number, Person>[]>([]);
const custom = ref<AsamSelectExpose>();
const filled: AsamOption<string, AsamRecord> = {
value: 'filled',
label: '已回填',
raw: { value: 'filled', label: '已回填' }
};
const options: AsamOption<number, Person>[] = [
{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }
];
const createPerson: AsamCreateOption<number, Person> = (text) => {
const id = Number(text);
if (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');
return { value: id, label: `实体 ${id}`, raw: { id, name: text } };
};
defineOptions({ name: 'AsamSelectCreateDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamSelect
v-model="record"
value-mode="object"
:options="[]"
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
placeholder="输入文本，创建普通记录"
/>
<AsamSelect
ref="custom"
v-model="people"
value-mode="object"
:options="options"
multiple
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
:create-option="createPerson"
placeholder="输入编号，创建完整实体"
/>
<AsamButton type="default" @click="record = filled">回填普通记录</AsamButton>
<AsamButton type="default" @click="custom?.clearCreatedOptions()"
>重置本地创建集合（保留模型）</AsamButton
>
<output>普通记录：{{ record }}；实体：{{ people }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelect, AsamButton } from '@asam-ui/ui';
const record = ref(null);
const people = ref([]);
const custom = ref();
const filled = { value: 'filled', label: '已回填', raw: { value: 'filled', label: '已回填' } };
const options = [{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }];
const createPerson = (text) => {
const id = Number(text);
if (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');
return { value: id, label: `实体 ${id}`, raw: { id, name: text } };
};
defineOptions({ name: 'AsamSelectCreateDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style>defaultFirstOption 的首项键盘选择直接遵循原生；object 模式选中创建项后仍返回完整对象。reserveKeyword=false 在多选提交后清理查询词，不清理已创建集合。
注意：对象选项创建的初始值与清空行为受固定依赖版本限制。 完整说明。
滚动末端与浮层插槽
end-reached(direction) 来自列表真正到达末端，方向为 top/bottom/left/right；popup-scroll 仅提供滚动位置，两者不能替代。 完整说明。
自定义标签、加载与清空策略
多选 tag 插槽接收 data、selectDisabled、deleteTag；调用 deleteTag 保留原生禁用和 remove-tag 事件。 完整说明。
自定义标签、加载与清空策略
<template>
<div class="example">
<AsamSelect
v-model="selected"
:options="options"
multiple
filterable
clearable
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
:tag-tooltip="{ placement: 'bottom', showAfter: 100 }"
:multiple-limit="3"
:loading="loading"
:empty-values="[null, undefined]"
:value-on-clear="null"
:fit-input-width="false"
popper-class="custom-choice-popup"
aria-label="自定义标签"
>
<template #tag="{ data, selectDisabled, deleteTag }">
<AsamButton
type="default"
v-for="(item, index) in data"
:key="index"
native-type="button"
:disabled="selectDisabled"
@click.stop="deleteTag($event, item)"
>
移除 {{ selected[index] }}
</AsamButton>
</template>
<template #label="{ label, index }">{{ index + 1 }} · {{ label }}</template>
<template #loading>正在准备静态数据</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<AsamCheckboxItem v-model="loading">切换加载状态</AsamCheckboxItem>
<output>已选：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamSelect, AsamCheckboxItem } from '@asam-ui/ui';
const selected = ref<string[]>(['design', 'dev']);
const loading = ref(false);
const options = ['design', 'dev', 'ops', 'test'].map((value) => ({
value,
label: value,
raw: { value }
}));
defineOptions({ name: 'AsamSelectCustomDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelect
v-model="selected"
:options="options"
multiple
filterable
clearable
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
:tag-tooltip="{ placement: 'bottom', showAfter: 100 }"
:multiple-limit="3"
:loading="loading"
:empty-values="[null, undefined]"
:value-on-clear="null"
:fit-input-width="false"
popper-class="custom-choice-popup"
aria-label="自定义标签"
>
<template #tag="{ data, selectDisabled, deleteTag }">
<AsamButton
type="default"
v-for="(item, index) in data"
:key="index"
native-type="button"
:disabled="selectDisabled"
@click.stop="deleteTag($event, item)"
>
移除 {{ selected[index] }}
</AsamButton>
</template>
<template #label="{ label, index }">{{ index + 1 }} · {{ label }}</template>
<template #loading>正在准备静态数据</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<AsamCheckboxItem v-model="loading">切换加载状态</AsamCheckboxItem>
<output>已选：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamSelect, AsamCheckboxItem } from '@asam-ui/ui';
const selected = ref(['design', 'dev']);
const loading = ref(false);
const options = ['design', 'dev', 'ops', 'test'].map((value) => ({
value,
label: value,
raw: { value }
}));
defineOptions({ name: 'AsamSelectCustomDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>异步查询回调
filterable + remote 将输入交给 remoteMethod。 完整说明。
异步回调与查询竞态示范
<template>
<div class="example">
<AsamSelect
v-model="value"
:options="options"
filterable
remote
remote-show-suffix
:remote-method="search"
:debounce="0"
:loading="loading"
:reserve-keyword="false"
clearable
aria-label="异步筛选演示"
>
<template #loading>正在筛选本地模拟数据</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
import type { AsamOption } from '@asam-ui/ui';
const value = ref<string | null>(null);
const query = ref('');
const loading = ref(false);
const source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));
const options = ref<AsamOption<string>[]>(source);
let generation = 0;
async function search(text: string) {
query.value = text;
const ownGeneration = ++generation;
loading.value = true;
await new Promise((resolve) => setTimeout(resolve, 180));
if (ownGeneration !== generation) return;
options.value = source.filter((option) => option.label.includes(text));
loading.value = false;
}
defineOptions({ name: 'AsamSelectSearchDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelect
v-model="value"
:options="options"
filterable
remote
remote-show-suffix
:remote-method="search"
:debounce="0"
:loading="loading"
:reserve-keyword="false"
clearable
aria-label="异步筛选演示"
>
<template #loading>正在筛选本地模拟数据</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
const value = ref(null);
const query = ref('');
const loading = ref(false);
const source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));
const options = ref(source);
let generation = 0;
async function search(text) {
query.value = text;
const ownGeneration = ++generation;
loading.value = true;
await new Promise((resolve) => setTimeout(resolve, 180));
if (ownGeneration !== generation) return;
options.value = source.filter((option) => option.label.includes(text));
loading.value = false;
}
defineOptions({ name: 'AsamSelectSearchDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>原始 options 字段映射
native 模式接受原始 options 字段映射，也可使用 Option 与 OptionGroup 插槽。 完整说明。
persistent=false 的挂载、来源更新和 selectedLabel 行为直接遵循底层依赖 2.14.7；ASAM 不重写选项缓存或导航。切换 persistent 不改变 ASAM 模型协议。
原始 options 字段映射与分组
<template>
<div class="example">
<AsamSelect
ref="control"
v-model="value"
value-mode="native"
:options="options"
:props="{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }"
filterable
clearable
:persistent="persistent"
>
<template #prefix>团队</template>
<template #header>原始字段映射与分组</template>
<template #footer>每项身份取 code</template>
<template #label="{ label }">已选 {{ label }}</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<AsamCheckboxItem v-model="persistent">保留列表 DOM</AsamCheckboxItem>
<AsamButton type="default" @click="options[0].members[0].title = '设计新名称'"
>关闭时更新设计名称</AsamButton
>
<AsamButton type="default" @click="selectedLabel = String(control?.selectedLabel)"
>读取实例标签</AsamButton
>
<output>原始值：{{ value }}</output>
<output>实例标签：{{ selectedLabel }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelect, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';
import type { AsamSelectExpose } from '@asam-ui/ui';
const control = ref<AsamSelectExpose>();
const value = ref<string | null>('design');
const persistent = ref(false);
const selectedLabel = ref('尚未读取');
// Stable group identities also avoid the fixed native top-level duplicate check.
const options = ref([
{
code: 'group-available',
title: '可用团队',
members: [
{ code: 'design', title: '设计' },
{ code: 'develop', title: '开发' }
]
},
{
code: 'group-disabled',
title: '停用团队',
members: [{ code: 'off', title: '停用', inactive: true }]
}
]);
defineOptions({ name: 'AsamSelectNativeDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelect
ref="control"
v-model="value"
value-mode="native"
:options="options"
:props="{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }"
filterable
clearable
:persistent="persistent"
>
<template #prefix>团队</template>
<template #header>原始字段映射与分组</template>
<template #footer>每项身份取 code</template>
<template #label="{ label }">已选 {{ label }}</template>
<template #empty>没有匹配项</template>
</AsamSelect>
<AsamCheckboxItem v-model="persistent">保留列表 DOM</AsamCheckboxItem>
<AsamButton type="default" @click="options[0].members[0].title = '设计新名称'"
>关闭时更新设计名称</AsamButton
>
<AsamButton type="default" @click="selectedLabel = String(control?.selectedLabel)"
>读取实例标签</AsamButton
>
<output>原始值：{{ value }}</output>
<output>实例标签：{{ selectedLabel }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelect, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';
const control = ref();
const value = ref('design');
const persistent = ref(false);
const selectedLabel = ref('尚未读取');
// Stable group identities also avoid the fixed native top-level duplicate check.
const options = ref([
{
code: 'group-available',
title: '可用团队',
members: [
{ code: 'design', title: '设计' },
{ code: 'develop', title: '开发' }
]
},
{
code: 'group-disabled',
title: '停用团队',
members: [{ code: 'off', title: '停用', inactive: true }]
}
]);
defineOptions({ name: 'AsamSelectNativeDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>空字符串、清空与默认折叠标签
空字符串可以是有效选项；native 模式的 emptyValues 明确排除空字符串，valueOnClear 明确返回 null。 完整说明。
空字符串、清空与默认折叠标签
<template>
<div class="example">
<section class="demo-layout-1" data-case="empty">
<AsamSelect
v-model="emptyValue"
value-mode="native"
:options="emptyOptions"
:empty-values="[null, undefined]"
:value-on-clear="null"
clearable
aria-label="空字符串也是有效选项"
@clear="clearCount++"
/>
<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>
</section>
<section data-case="explicit-tooltip">
<AsamSelect
v-model="explicit"
:options="options"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="1"
:teleported="false"
popper-class="inherited-choice-tooltip"
effect="dark"
:tag-tooltip="{
popperClass: 'explicit-choice-tooltip',
effect: 'light',
placement: 'top',
showAfter: 0
}"
aria-label="显式折叠标签配置"
/>
</section>
<section data-case="inherited-tooltip">
<AsamSelect
v-model="inherited"
:options="options"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
:teleported="false"
popper-class="inherited-choice-tooltip"
effect="dark"
:tag-tooltip="{ showAfter: 0 }"
aria-label="继承折叠标签配置"
/>
</section>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
const emptyValue = ref<string | null>('');
const clearCount = ref(0);
const emptyOptions = [
{ label: '全部', value: '' },
{ label: '设计', value: 'design' }
];
const options = ['design', 'develop', 'ops', 'test'].map((value) => ({
label: value,
value,
raw: { value }
}));
const explicit = ref<string[]>(options.map((option) => option.value));
const inherited = ref<string[]>(options.map((option) => option.value));
defineOptions({ name: 'AsamSelectDisplayDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
section {
width: min(100%, 360px);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style><template>
<div class="example">
<section class="demo-layout-1" data-case="empty">
<AsamSelect
v-model="emptyValue"
value-mode="native"
:options="emptyOptions"
:empty-values="[null, undefined]"
:value-on-clear="null"
clearable
aria-label="空字符串也是有效选项"
@clear="clearCount++"
/>
<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>
</section>
<section data-case="explicit-tooltip">
<AsamSelect
v-model="explicit"
:options="options"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="1"
:teleported="false"
popper-class="inherited-choice-tooltip"
effect="dark"
:tag-tooltip="{
popperClass: 'explicit-choice-tooltip',
effect: 'light',
placement: 'top',
showAfter: 0
}"
aria-label="显式折叠标签配置"
/>
</section>
<section data-case="inherited-tooltip">
<AsamSelect
v-model="inherited"
:options="options"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
:teleported="false"
popper-class="inherited-choice-tooltip"
effect="dark"
:tag-tooltip="{ showAfter: 0 }"
aria-label="继承折叠标签配置"
/>
</section>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelect } from '@asam-ui/ui';
const emptyValue = ref('');
const clearCount = ref(0);
const emptyOptions = [
{ label: '全部', value: '' },
{ label: '设计', value: 'design' }
];
const options = ['design', 'develop', 'ops', 'test'].map((value) => ({
label: value,
value,
raw: { value }
}));
const explicit = ref(options.map((option) => option.value));
const inherited = ref(options.map((option) => option.value));
defineOptions({ name: 'AsamSelectDisplayDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
section {
width: min(100%, 360px);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
原生委托边界
native 的 tag scope 使用原生 OptionBasic[]：可以访问每项的 value、currentLabel、index、isDisabled，并将同一项与 MouseEvent 传给 deleteTag。完整示例直接读取原生项，不用模型数组下标替代项类型。
原生标签项与删除回调
<template>
<div class="demo-root-layout">
<AsamSelect
v-model="selected"
value-mode="native"
multiple
:options="options"
:teleported="false"
aria-label="经典自定义标签"
>
<template #tag="{ data, selectDisabled, deleteTag }">
<AsamButton
type="default"
v-for="option in data"
:key="String(option.value)"
native-type="button"
:disabled="selectDisabled || option.isDisabled"
@click.stop="deleteTag($event, option)"
>
{{ option.currentLabel }}
</AsamButton>
</template>
</AsamSelect>
<output>已选：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamSelect } from '@asam-ui/ui';
defineOptions({ name: 'AsamSelectNativeTagExample' });
const selected = ref(['a']);
const options = [
{ value: 'a', label: 'Alpha' },
{ value: 'b', label: 'Beta', disabled: true }
];
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style><template>
<div class="demo-root-layout">
<AsamSelect
v-model="selected"
value-mode="native"
multiple
:options="options"
:teleported="false"
aria-label="经典自定义标签"
>
<template #tag="{ data, selectDisabled, deleteTag }">
<AsamButton
type="default"
v-for="option in data"
:key="String(option.value)"
native-type="button"
:disabled="selectDisabled || option.isDisabled"
@click.stop="deleteTag($event, option)"
>
{{ option.currentLabel }}
</AsamButton>
</template>
</AsamSelect>
<output>已选：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamSelect } from '@asam-ui/ui';
defineOptions({ name: 'AsamSelectNativeTagExample' });
const selected = ref(['a']);
const options = [
{ value: 'a', label: 'Alpha' },
{ value: 'b', label: 'Beta', disabled: true }
];
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>valueMode="native" 直接使用依赖中的原生选择器；options、props 字段映射、默认值、全部事件参数和命名插槽原样交给原生。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamSelectProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options | 已规范化的静态选项列表；此组件不发起数据请求。 | readonly AsamSelectOption<V, I>[] | undefined | Record<string, any>[] | undefined | () => [] |
separator | — | string | undefined | undefined | ',' |
clearable | 是否可以清空选项 | boolean | undefined | false |
disabled | 是否禁用该选项 | boolean | undefined | (AsamSelectProps<V, I>)["disabled"] | undefined |
filterable | Select 组件是否可筛选 | boolean | undefined | false |
placeholder | 占位符，默认为“Select” | string | undefined | undefined |
collapseTags | 多选时是否将选中值按文字的形式展示 | boolean | undefined | false |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此功能，collapse-tags的值必须为true | boolean | undefined | false |
teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | boolean | undefined | (AsamSelectProps<V, I>)["teleported"] | true |
multipleLimit | 多选时可被选择的最大数目。当被设置为0时，可被选择的数目不设限。 | number | undefined | 0 |
loading | 是否从远程加载数据 | boolean | undefined | false |
remote | 其中的选项是否从服务器远程加载 | boolean | undefined | false |
remoteMethod | 当输入值发生变化时触发的函数。它的参数就是当前的输入值。当filterable设置为 true 时才会生效 | ((query: string) => void) | undefined | — |
ariaLabel | 等价于原生 input aria-label 属性 | string | undefined | — |
id | 原生 input 的 id | string | undefined | — |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamSelectProps<V, I>)["effect"] | "light" |
popperClass | 为 Tooltip 的 popper 添加自定义类名 | AsamSelectRuntimeProps["popperClass"] | "" |
popperStyle | Select 下拉菜单和标签提示的自定义样式 | (AsamSelectProps<V, I>)["popperStyle"] | undefined |
fallbackPlacements | dropdown 可用的 positions 请查看popper.js 文档 | (AsamSelectProps<V, I>)["fallbackPlacements"] | ["bottom-start","top-start","right","left"] |
offset | 下拉面板偏移量 | number | undefined | 12 |
placement | 下拉框出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamSelectProps<V, I>)["placement"] | "bottom-start" |
popperOptions | Popper 配置参数。 | (AsamSelectProps<V, I>)["popperOptions"] | 工厂函数（每个实例创建） |
showArrow | 下拉菜单的内容是否有箭头 | (AsamSelectProps<V, I>)["showArrow"] | true |
appendTo | 下拉框挂载到哪个 DOM 元素 | (AsamSelectProps<V, I>)["appendTo"] | — |
persistent | 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 | (AsamSelectProps<V, I>)["persistent"] | true |
tabindex | input 的 tabindex | (AsamSelectProps<V, I>)["tabindex"] | 0 |
props | options 的配置 | (AsamSelectProps<V, I>)["props"] | 工厂函数（每个实例创建） |
name | 选择器的原生name属性 | string | undefined | — |
filterMethod | 自定义筛选方法的第一个参数是当前输入的值。只有当 filterable 设置为 true 时才会生效。 | ((query: string) => void) | undefined | — |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamSelectProps<V, I>)["valueOnClear"] | undefined |
validateEvent | 是否触发表单验证 | (AsamSelectProps<V, I>)["validateEvent"] | true |
automaticDropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamSelectProps<V, I>)["clearIcon"] | {"name":"CircleClose","__name":"circle-close"} |
autocomplete | Select 输入框的原生 autocomplete 属性 | string | undefined | "off" |
debounce | 远程搜索时的防抖延迟（以毫秒为单位） | number | undefined | 300 |
loadingText | 从服务器加载数据时显示的文本，默认为“Loading” | string | undefined | — |
noMatchText | 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” | string | undefined | — |
noDataText | 无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data” | string | undefined | — |
defaultFirstOption | 是否在输入框按下回车时，选择第一个匹配项。需配合 filterable 或 remote 使用 | boolean | undefined | false |
reserveKeyword | 当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词 | (AsamSelectProps<V, I>)["reserveKeyword"] | true |
valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | undefined | "value" |
tagTooltip | 折叠标签工具提示的配置对象。要使用此项， collapse-tags 和 collapse-tags-tooltip 必须为 true | (AsamSelectProps<V, I>)["tagTooltip"] | 工厂函数（每个实例创建） |
maxCollapseTags | 需要显示的 Tag 的最大数量。只有当 collapse-tags 设置为 true 时才会生效。 | number | undefined | 1 |
fitInputWidth | 下拉框的宽度是否与输入框相同 | boolean | undefined | false |
suffixIcon | 自定义后缀图标组件 | (AsamSelectProps<V, I>)["suffixIcon"] | {"name":"ArrowDown","__name":"arrow-down"} |
tagType | 标签类型 | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamSelectProps<V, I>)["tagType"] | "info" |
tagEffect | 标签效果 | enum"light" | "dark" | "plain"完整类型：(AsamSelectProps<V, I>)["tagEffect"] | "light" |
remoteShowSuffix | 远程搜索方法显示后缀图标 | boolean | undefined | false |
size | 输入框尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
allowCreate | 是否允许创建新条目，当使用该属性时，filterable必须设置为true | boolean | undefined | false | undefined | true | false |
modelValue | 选中项绑定值 | 查看完整类型V | null | undefined | AsamSelectOption<V, I> | null | undefined | readonly V[] | undefined | string | undefined | readonly AsamSelectOption<V, I>[] | undefined | (AsamSelectProps<V, I>)["modelValue"] | undefined |
multiple | 是否多选 | false | undefined | true | boolean | undefined | false |
valueMode | — | enum"value" | "object" | "native"完整类型："value" | undefined | "object" | "native" | 'value' |
multipleValueMode | — | enum"array" | "string"完整类型：undefined | "array" | undefined | "string" | undefined |
createOption | — | AsamCreateOption<V, I> | undefined | — |
事件 AsamSelectEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamSelectAnyModelValue] | — |
change | — | [value: AsamSelectAnyModelValue] | — |
clear | — | (AsamSelectEmits)["clear"] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
visible-change | — | [visible: boolean] | — |
remove-tag | — | [value: unknown] | — |
popup-scroll | — | [event: { scrollTop: number; scrollLeft: number; }] | — |
end-reached | — | [direction: AsamScrollbarDirection] | — |
插槽 AsamSelectSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
tag | — | 查看完整类型((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined | — |
label | — | 查看完整类型((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined | — |
实例方法与状态 AsamSelectExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | 聚焦原生输入控件。 | () => void | — |
blur | — | () => void | — |
selectedLabel | — | string | string[] | — |
clearCreatedOptions | 仅在逻辑数据来源或作用域变化时重置本地创建项，不因搜索、刷新或错误重置。 | () => void | — |
用法与契约补充说明
ASAM 扩展与迁移
ASAM 扩展为四档密度、规范化 options、valueMode、multipleValueMode 与 separator。原始对象值必须显式 native 并配置 valueKey；object 模式保存规范化 option，raw 保留业务原件。空单选为 null，空多选为 [] 或空字符串。未解析值不会自动发起请求。loading、remote、remoteMethod 只是调用方控制的检索入口，异步生命周期使用本站 Remote 组件。
对象选项创建
filterable + allowCreate 允许输入新选项。普通记录的 valueMode="object" 返回完整 { value, label, raw }，单选清空为 null，多选清空为 []。自定义 value/raw 必须传同步 createOption(text)；它必须返回真实实体，不能返回字符串、Promise 或缺少 raw 的对象。多选按实际值类型去重，数字 7 与字符串 '7' 保持区别；同值已有规范项优先。回填完整对象不需要先请求远端。
滚动末端与浮层插槽
end-reached(direction) 来自列表真正到达末端，方向为 top/bottom/left/right；popup-scroll 仅提供滚动位置，两者不能替代。默认插槽可组合 Option/OptionGroup；header/footer/loading/empty/prefix/tag/label 分别承接列表内容、状态与选中展示。valueMode="native" 保留原始对象、字段映射与原生分组，不参与 ASAM 对象创建归一化。
自定义标签、加载与清空策略
多选 tag 插槽接收 data、selectDisabled、deleteTag；调用 deleteTag 保留原生禁用和 remove-tag 事件。label 插槽接收 index、label、value；index 为 number，label/value 沿用原生公开槽的开放类型，具体操作须与实际选项值匹配。collapseTags、maxCollapseTags 与 collapseTagsTooltip 控制默认折叠标签；自定义 tag 时由插槽自己决定布局。 tagTooltip 显式字段优先，随后继承同名浮层配置，最后使用底层 Tooltip 默认。 emptyValues 决定空值集合，valueOnClear 决定清空返回值；object 模式仍输出完整选项或 null。 loading / empty 插槽分别展示加载和无结果；multipleLimit 限制已选数量。
异步查询回调
filterable + remote 将输入交给 remoteMethod。基础入口本身不请求数据，示例由调用方 异步筛选本地模拟记录，并用 generation 防止迟到响应覆盖较新查询。debounce 控制输入 回调延迟，reserveKeyword 决定多选选中后保留搜索词；完整请求和字典生命周期使用本站 RemoteSelect / DictSelect。filterMethod 可在非 remote 模式使用自定义过滤策略。
空字符串、清空与默认折叠标签
空字符串可以是有效选项；native 模式的 emptyValues 明确排除空字符串，valueOnClear 明确返回 null。默认 tag 渲染下，显式 tagTooltip 配置优先于继承的 popperClass/effect；maxCollapseTags 控制保留的可见标签数。自定义 tag 插槽会接管默认标签布局，因此另用这个完整示例验证默认折叠浮层。
API 阅读方式
高级 value/object 模式默认 placeholder 为“请选择”；valueMode="native" 保留原生省略值、显式 undefined/null/false 和默认值，可显式覆盖；显式 popperClass 保留并追加当前密度类。固定 2.14.7 已移除 suffixTransition，箭头内容使用 suffixIcon，样式由当前组件 CSS 控制。
原生委托边界
valueMode="native" 直接使用依赖中的原生选择器；options、props 字段映射、默认值、全部事件参数和命名插槽原样交给原生。focus / blur 保留原生调用返回值，selectedLabel 每次读取原生公开值。高级 value/object 和 array/string 路径单独承接 ASAM 数据协议；createOption 不生成虚假业务实体。创建首项、选项缓存与查询宽度若有原生限制，ASAM 不修改私有 options/hover 状态或 DOM 尺寸算法。
更多参数与事件说明
对象选项创建
固定依赖 2.14.7 / Vue 3.5.34 下，已核验的单选输入为 options=[]、显式传入初始 modelValue=undefined 或 modelValue=null 的两组独立输入，allowCreate / filterable / defaultFirstOption 为 true，reserveKeyword / teleported 为 false。输入 Created 并等待 500 ms 后，直接按 Enter（未先按 ArrowDown），可见的 Created 项没有被选中，且没有 update:modelValue / change 事件；原生选择器与 ASAM native / value / object 路径结果一致。点击同一项的正控制能够选择，ASAM object 返回完整 value/label/raw。该 Enter 结果只限定此具体输入；多选、非空 options、其他初始值及其他键盘流程按各自核验结果判断，ASAM 不接管私有选项或导航算法。
原始 options 字段映射
valueMode="native" 可使用原始 options 和 props.value / label / disabled / options 字段别名，
或使用本站 Option / OptionGroup 插槽入口。分组 children 保持在 options 指定的字段内；
模型保存选项对应的原始值，不经过 ASAM 标准化。对象原始值需设置 valueKey 作为稳定身份。
关联组件
参数与事件补充说明
通过可辨识的值策略排除非法组合：单选不能设置 multipleValueMode，对象值不能使用字符串存储。
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
options
必填：否；声明来源：ASAM 声明。
默认值与来源
() => []（源码表达式；ASAM 声明）来源分支 8
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
separator
必填：否；声明来源：ASAM 声明。
默认值与来源
','（源码表达式；ASAM 声明）clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
filterable
必填：否；声明来源：ASAM 声明。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placeholder
必填：否；声明来源：ASAM 声明。
默认值与来源
undefined（源码表达式；ASAM 声明）来源分支 8
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
collapseTags
必填：否；声明来源：ASAM 声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTagsTooltip
必填：否；声明来源：ASAM 声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）来源分支 8
固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multipleLimit
必填：否；声明来源：ASAM 声明。
默认值与来源
0（已安装运行时；已安装组件）来源分支 8
固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remote
必填：否；声明来源：ASAM 声明。
remote 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remoteMethod
必填：否；声明来源：ASAM 声明。
remoteMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
事件参数：(query: string): void
默认值与来源
未知 / 未声明来源分支 8
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
"light"（已安装运行时；已安装组件）固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
["bottom-start","top-start","right","left"]（已安装运行时；已安装组件）固定上游文档默认：['bottom-start', 'top-start', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：['bottom-start', 'top-start', 'right', 'left']（2.14.7；源码事实，未作为 ASAM 运行实测）
offset
必填：否；声明来源：上游声明。
默认值与来源
12（已安装运行时；已安装组件）固定上游文档默认：12（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：12（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"bottom-start"（已安装运行时；已安装组件）固定上游文档默认：bottom-start（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'bottom-start'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamSelectProps<V, I>)["popperOptions"]>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamSelectProps<V, I>)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamSelectProps<V, I>)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamSelectProps<V, I>)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({}) as Partial<Options>（2.14.7；源码事实，未作为 ASAM 运行实测）
showArrow
必填：否；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
props
必填：否；声明来源：上游声明。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
props.label:string | undefined— 上游声明指定节点标签为节点对象的某个属性值
固定上游文档默认：
label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.value:string | undefined— 上游声明指定选项的值为选项对象的某个属性值
固定上游文档默认：
value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.disabled:string | undefined— 上游声明指定选项的禁用为选项对象的某个属性值
固定上游文档默认：
disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.options:string | undefined— 上游声明指定选项的子选项为选项对象的某个属性值
固定上游文档默认：
options（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => defaultProps（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
filterMethod
必填：否；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSelectProps<V, I>)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
{"name":"CircleClose","__name":"circle-close"}（已安装运行时；已安装组件）固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
autocomplete
必填：否；声明来源：上游声明。
默认值与来源
"off"（已安装运行时；已安装组件）固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'off'（2.14.7；源码事实，未作为 ASAM 运行实测）
debounce
必填：否；声明来源：上游声明。
默认值与来源
300（已安装运行时；已安装组件）固定上游文档默认：300（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：300（2.14.7；源码事实，未作为 ASAM 运行实测）
loadingText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noMatchText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noDataText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultFirstOption
必填：否；声明来源：上游声明。
defaultFirstOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
reserveKeyword
必填：否；声明来源：上游声明。
reserveKeyword 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
valueKey
必填：否；声明来源：上游声明。
默认值与来源
"value"（已安装运行时；已安装组件）固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'value'（2.14.7；源码事实，未作为 ASAM 运行实测）
tagTooltip
必填：否；声明来源：上游声明。
tagTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
tagTooltip.appendTo:string | HTMLElement | undefined— 上游声明指示 Tooltip 的内容将附加在哪一个网页元素上
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.placement:PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "placement">— 上游声明Tooltip 组件出现的位置
固定上游文档默认：
bottom（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"tagTooltip.fallbackPlacements:AsamSelectRuntimeProps["fallbackPlacements"]— 上游声明提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。
固定上游文档默认：
['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.effect:PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "effect">— 上游声明Tooltip 主题，内置了 dark / light 两种
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"light"/"dark"tagTooltip.popperClass:AsamSelectRuntimeProps["popperClass"]— 上游声明为 Tooltip 的 popper 添加自定义类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
falsetagTooltip.popperStyle:AsamSelectRuntimeProps["popperStyle"]— 上游声明为 Tooltip 的 popper 添加自定义样式
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
tagTooltip.transition:string | undefined— 上游声明动画名称
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.teleported:boolean | undefined— 上游声明是否使用 teleport。设置成 true则会被追加到 append-to 的位置
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truetagTooltip.popperOptions:AsamSelectRuntimeProps["popperOptions"]— 上游声明Popper 配置参数。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperOptions.placement:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "popperOptions">>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"tagTooltip.popperOptions.modifiers:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "popperOptions">>, "modifiers">— 依赖声明tagTooltip.popperOptions.strategy:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"tagTooltip.popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectProps<V, I>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
tagTooltip.showAfter:number | undefined— 上游声明在触发后多久显示内容，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.hideAfter:number | undefined— 上游声明关闭时的延迟
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.autoClose:number | undefined— 上游声明tooltip 出现后自动隐藏延时，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.offset:number | undefined— 上游声明Tooltip 出现位置的偏移量
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
maxCollapseTags
必填：否；声明来源：上游声明。
默认值与来源
1（已安装运行时；已安装组件）固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
fitInputWidth
必填：否；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
suffixIcon
必填：否；声明来源：上游声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSelectProps<V, I>)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
{"name":"ArrowDown","__name":"arrow-down"}（已安装运行时；已安装组件）固定上游文档默认：ArrowDown（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：ArrowDown（2.14.7；源码事实，未作为 ASAM 运行实测）
tagType
必填：否；声明来源：上游声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
"info"（已安装运行时；已安装组件）固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagEffect
必填：否；声明来源：上游声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
"light"（已安装运行时；已安装组件）固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remoteShowSuffix
必填：否；声明来源：上游声明。
remoteShowSuffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）allowCreate
必填：否；声明来源：ASAM 声明。
allowCreate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false
枚举：true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
modelValue
必填：否；声明来源：ASAM 声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
modelValue.label:string— 数据 / provider 协议modelValue.value:V— 数据 / provider 协议modelValue.disabled:boolean | undefined— 数据 / provider 协议枚举：
false/truemodelValue.raw:I— 数据 / provider 协议modelValue.children:readonly AsamOption<V, I>[] | undefined— 数据 / provider 协议
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）来源分支 8
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
multiple
必填：否；声明来源：ASAM 声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
枚举：true
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 8
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueMode
必填：否；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："value"
枚举："object"
枚举："native"
默认值与来源
'value'（源码表达式；ASAM 声明）multipleValueMode
必填：否；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："array"
枚举："string"
默认值与来源
undefined（源码表达式；ASAM 声明）createOption
必填：按分支；声明来源：ASAM 声明。
createOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
事件参数：(text: string): AsamOption<V, I>
AsamSelectProps 公开类型视图
import type { Attrs } from 'vue';
import type { AsamSelectProps, AsamValue, AsamRecord, AsamSelectOption, AsamSelectRuntimeProps, AsamSelectV2NativeProps, AsamSelectValueMode, AsamSelectNativeProps, AsamControlSize, AsamCreateOption, AsamOption } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSelectProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = AsamSelectProps<V, I>;参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
remove-tag
必填：是；声明来源：ASAM 声明。
popup-scroll
必填：是；声明来源：ASAM 声明。
end-reached
必填：是；声明来源：ASAM 声明。
AsamSelectEmits 公开类型视图
import type { AsamSelectEmits, AsamSelectAnyModelValue, AsamScrollbarDirection } from '@asam-ui/ui';
// AsamSelectEmits
type PublicContract = {
"update:modelValue": [value: AsamSelectAnyModelValue];
"change": [value: AsamSelectAnyModelValue];
"clear": (AsamSelectEmits)["clear"];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"visible-change": [visible: boolean];
"remove-tag": [value: unknown];
"popup-scroll": [event: { scrollTop: number; scrollLeft: number; }];
"end-reached": [direction: AsamScrollbarDirection];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
empty
必填：否；声明来源：ASAM 声明。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }): unknown
label
必填：否；声明来源：ASAM 声明。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }): unknown
AsamSelectSlots 公开类型视图
import type { AsamSelectSlots, AsamTreeSelectTagOption, AsamSelectV2NativeProps } from '@asam-ui/ui';
// AsamSelectSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"tag"?: ((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined;
"label"?: ((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
selectedLabel
必填：是；声明来源：ASAM 声明。
clearCreatedOptions
必填：是；声明来源：ASAM 声明。
clearCreatedOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamSelectExpose 公开类型视图
import type { AsamSelectExpose } from '@asam-ui/ui';
// AsamSelectExpose
type PublicContract = {
"focus": () => void;
"blur": () => void;
readonly "selectedLabel": string | string[];
"clearCreatedOptions": () => void;
};