使用场景
以虚拟列表处理较多选项，height 与 itemHeight 控制列表视口。 options 使用包含 label、value、raw 的规范化选项；本组件不发起数据请求。远程与字典数据见本站对应数据组件。
单选、筛选与事件
change 反映用户提交，clear 反映清空。禁用选项不能选择；disabled 禁用整个选择器并保留已选回显。实例 focus / blur 访问实际输入。
单选、筛选与事件
<template>
<div class="example">
<AsamSelectV2
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>
<AsamSelectV2 :model-value="value" :options="options" disabled aria-label="禁用虚拟选择" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSelectV2BasicExample' });
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
import type { AsamSelectV2Expose } from '@asam-ui/ui';
const control = ref<AsamSelectV2Expose>();
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">
<AsamSelectV2
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>
<AsamSelectV2 :model-value="value" :options="options" disabled aria-label="禁用虚拟选择" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSelectV2BasicExample' });
import { ref } from 'vue';
import { AsamSelectV2, 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">
<AsamSelectV2
v-model="objectValue"
:options="options"
v-bind="{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }"
/>
<AsamSelectV2
v-model="arrayValue"
:options="options"
v-bind="{
multiple: true,
'collapse-tags': true,
'collapse-tags-tooltip': true,
'aria-label': '数组选择'
}"
/>
<AsamSelectV2
v-model="stringValue"
:options="options"
v-bind="{
multiple: true,
'multiple-value-mode': 'string',
separator: '|',
'aria-label': '字符串选择'
}"
/>
<AsamSelectV2
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: 'AsamSelectV2PoliciesExample' });
import { ref } from 'vue';
import { AsamSelectV2 } 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">
<AsamSelectV2
v-model="objectValue"
:options="options"
v-bind="{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }"
/>
<AsamSelectV2
v-model="arrayValue"
:options="options"
v-bind="{
multiple: true,
'collapse-tags': true,
'collapse-tags-tooltip': true,
'aria-label': '数组选择'
}"
/>
<AsamSelectV2
v-model="stringValue"
:options="options"
v-bind="{
multiple: true,
'multiple-value-mode': 'string',
separator: '|',
'aria-label': '字符串选择'
}"
/>
<AsamSelectV2
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: 'AsamSelectV2PoliciesExample' });
import { ref } from 'vue';
import { AsamSelectV2 } 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>虚拟选项与列表插槽
default 插槽收到 item、index、disabled，header/footer 提供列表附加内容。内联的 options 工具生成规范化数据，复制或下载当前 Demo.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 options_js_1: any = require("./options.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamSelectV2SlotsExample' },
__name: 'Demo',
setup(__props?: any) {
const options: any = (0, options_js_1.makeOptions)(500);
const value: any = (0, vue_3.ref)(1);
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.AsamSelectV2), (0, vue_2.mergeProps)({
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event))
}, {
...{ options: (0, vue_2.unref)(options), height: 220, 'item-height': 36 },
...{ filterable: true, 'aria-label': '虚拟选项' }
}), {
default: (0, vue_2.withCtx)(({ item, index }: any) => [
(0, vue_2.createTextVNode)((0, vue_2.toDisplayString)(index + 1) + " · " + (0, vue_2.toDisplayString)(item.label), 1 /* TEXT */)
]),
header: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)(" 本地 500 项 ", -1 /* CACHED */)
]))]),
footer: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)(" 虚拟列表 ", -1 /* CACHED */)
]))]),
empty: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)(" 没有结果 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue"]),
(0, vue_2.createElementVNode)("output", null, "值：" + (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-cd69a708";
},
"options.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.makeOptions = makeOptions;
function makeOptions(count?: any) {
return Array.from({ length: count }, (_?: any, i?: any) => ({
label: '选项 ' + (i + 1),
value: i + 1,
raw: { id: i + 1 }
}));
}
},
};
const __dependencies: any = {"Demo.vue":{"./options.js":"options.ts"},"options.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-cd69a708] {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row[data-v-cd69a708] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid[data-v-cd69a708] {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section[data-v-cd69a708] {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output[data-v-cd69a708] {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><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 options_js_1 = require("./options.js");
exports.default = Object.assign({ name: 'AsamSelectV2SlotsExample' }, {
__name: 'Demo',
setup(__props) {
const options = (0, options_js_1.makeOptions)(500);
const value = (0, vue_2.ref)(1);
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.AsamSelectV2), (0, vue_1.mergeProps)({
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event))
}, {
...{ options: (0, vue_1.unref)(options), height: 220, 'item-height': 36 },
...{ filterable: true, 'aria-label': '虚拟选项' }
}), {
default: (0, vue_1.withCtx)(({ item, index }) => [
(0, vue_1.createTextVNode)((0, vue_1.toDisplayString)(index + 1) + " · " + (0, vue_1.toDisplayString)(item.label), 1 /* TEXT */)
]),
header: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)(" 本地 500 项 ", -1 /* CACHED */)
]))]),
footer: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)(" 虚拟列表 ", -1 /* CACHED */)
]))]),
empty: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)(" 没有结果 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue"]),
(0, vue_1.createElementVNode)("output", null, "值：" + (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-61d3ee72";
},
"options.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.makeOptions = makeOptions;
function makeOptions(count) {
return Array.from({ length: count }, (_, i) => ({
label: '选项 ' + (i + 1),
value: i + 1,
raw: { id: i + 1 }
}));
}
},
};
const __dependencies = {"Demo.vue":{"./options.js":"options.js"},"options.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-61d3ee72] {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row[data-v-61d3ee72] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid[data-v-61d3ee72] {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section[data-v-61d3ee72] {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output[data-v-61d3ee72] {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>在固定依赖 2.14.7 / Vue 3.5.34 的已核验输入中，首次挂载未提供 default 插槽，随后向同一实例动态新增该插槽时，新内容未显示；原生虚拟选择器与 ASAM native 路径结果一致。 完整说明。
四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSelectV2
v-bind="{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="big">
<strong> big </strong>
<AsamSelectV2
v-bind="{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="default">
<strong> default </strong>
<AsamSelectV2
v-bind="{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="small">
<strong> small </strong>
<AsamSelectV2
v-bind="{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSelectV2 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: 'AsamSelectV2SizesExample' });
import { ref } from 'vue';
import { AsamSelectV2, 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>
<AsamSelectV2
v-bind="{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="big">
<strong> big </strong>
<AsamSelectV2
v-bind="{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="default">
<strong> default </strong>
<AsamSelectV2
v-bind="{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
<section data-density="small">
<strong> small </strong>
<AsamSelectV2
v-bind="{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }"
:options="options"
/>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSelectV2 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: 'AsamSelectV2SizesExample' });
import { ref } from 'vue';
import { AsamSelectV2, 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。 完整说明。
来源接管本地创建项
对象创建先返回工厂提供的完整选项。 完整说明。
来源接管本地创建项
<template>
<div class="example">
<AsamSelectV2
ref="control"
v-model="model"
:options="options"
:create-option="createOption"
value-mode="object"
allow-create
filterable
clearable
placeholder="输入 Omega 并选择创建项"
/>
<AsamButton type="default" @click="options = [canonical]">来源接管同值项</AsamButton>
<AsamButton type="default" @click="model = null">清空模型后重新选择</AsamButton>
<AsamButton type="default" @click="control?.clearCreatedOptions()"
>重置本地创建集合</AsamButton
>
<AsamButton type="default" @click="label = control?.selectedLabel"
>读取实际选中标签</AsamButton
>
<output data-model>{{ JSON.stringify(model) }}</output>
<output data-label>{{ JSON.stringify(label) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
import type { AsamOption, AsamCreateOption, AsamSelectV2Expose } from '@asam-ui/ui';
interface Member {
id: string;
}
defineOptions({ name: 'AsamSelectV2CanonicalDemo' });
const model = ref<AsamOption<string, Member> | null>(null);
const options = ref<AsamOption<string, Member>[]>([]);
const control = ref<AsamSelectV2Expose>();
const label = ref<string | string[]>();
const canonical: AsamOption<string, Member> = {
value: 'Omega',
label: 'Server Omega',
raw: { id: 'saved' }
};
const createOption: AsamCreateOption<string, Member> = (text) => ({
value: text,
label: text,
raw: { id: 'local-' + text }
});
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamSelectV2
ref="control"
v-model="model"
:options="options"
:create-option="createOption"
value-mode="object"
allow-create
filterable
clearable
placeholder="输入 Omega 并选择创建项"
/>
<AsamButton type="default" @click="options = [canonical]">来源接管同值项</AsamButton>
<AsamButton type="default" @click="model = null">清空模型后重新选择</AsamButton>
<AsamButton type="default" @click="control?.clearCreatedOptions()"
>重置本地创建集合</AsamButton
>
<AsamButton type="default" @click="label = control?.selectedLabel"
>读取实际选中标签</AsamButton
>
<output data-model>{{ JSON.stringify(model) }}</output>
<output data-label>{{ JSON.stringify(label) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamSelectV2CanonicalDemo' });
const model = ref(null);
const options = ref([]);
const control = ref();
const label = ref();
const canonical = {
value: 'Omega',
label: 'Server Omega',
raw: { id: 'saved' }
};
const createOption = (text) => ({
value: text,
label: text,
raw: { id: 'local-' + text }
});
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style>大列表过滤、末端事件和对象创建
虚拟列表只渲染视口附近的行，height 控制视口、itemHeight 控制行高。 完整说明。
对象创建与 Select 共用 createOption 契约：普通记录自动构造完整 label/value/raw，自定义实体必须传同步工厂；清空返回 null/数组空值，按实际 value 类型去重。 完整说明。
虚拟长列表与真实末端事件
<template>
<div class="example">
<AsamSelectV2
v-model="selected"
:options="options"
filterable
clearable
:height="220"
:item-height="36"
placeholder="筛选或滚动到第 499 项"
@end-reached="ends.push($event)"
/>
<AsamSelectV2
v-model="created"
value-mode="object"
:options="[]"
allow-create
filterable
clearable
placeholder="输入文本，创建完整记录"
/>
<output>选中：{{ selected }}；末端方向：{{ ends }}；创建：{{ created }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
import type { AsamOption, AsamRecord } from '@asam-ui/ui';
const options = Array.from({ length: 500 }, (_, index) => ({
value: `row-${index}`,
label: `第 ${index} 项`,
raw: { index }
}));
const selected = ref<string | null>(null);
const ends = ref<string[]>([]);
const created = ref<AsamOption<string, AsamRecord> | null>(null);
defineOptions({ name: 'AsamSelectV2VirtualDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamSelectV2
v-model="selected"
:options="options"
filterable
clearable
:height="220"
:item-height="36"
placeholder="筛选或滚动到第 499 项"
@end-reached="ends.push($event)"
/>
<AsamSelectV2
v-model="created"
value-mode="object"
:options="[]"
allow-create
filterable
clearable
placeholder="输入文本，创建完整记录"
/>
<output>选中：{{ selected }}；末端方向：{{ ends }}；创建：{{ created }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
const options = Array.from({ length: 500 }, (_, index) => ({
value: `row-${index}`,
label: `第 ${index} 项`,
raw: { index }
}));
const selected = ref(null);
const ends = ref([]);
const created = ref(null);
defineOptions({ name: 'AsamSelectV2VirtualDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style>原始字段映射与分组
valueMode="native" 使用原始 options，props.options 映射组的子项字段，value/label/disabled 分别映射单项身份、文字和禁用标记。 完整说明。
原始字段映射与虚拟分组
<template>
<div class="example">
<AsamSelectV2
v-model="value"
value-mode="native"
:options="options"
:props="{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }"
filterable
clearable
:height="200"
:item-height="36"
>
<template #prefix>团队</template>
<template #header>原始字段映射与分组</template>
<template #footer>每项身份取 code</template>
<template #label="{ label }">已选 {{ label }}</template>
<template #empty>没有匹配项</template>
</AsamSelectV2>
<output>原始值：{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
const value = ref<string | null>(null);
// Stable group identities also avoid the fixed native top-level duplicate check.
const options = [
{
code: 'group-available',
title: '可用团队',
members: [
{ code: 'design', title: '设计' },
{ code: 'develop', title: '开发' }
]
},
{
code: 'group-disabled',
title: '停用团队',
members: [{ code: 'off', title: '停用', inactive: true }]
}
];
defineOptions({ name: 'AsamSelectV2NativeDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
v-model="value"
value-mode="native"
:options="options"
:props="{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }"
filterable
clearable
:height="200"
:item-height="36"
>
<template #prefix>团队</template>
<template #header>原始字段映射与分组</template>
<template #footer>每项身份取 code</template>
<template #label="{ label }">已选 {{ label }}</template>
<template #empty>没有匹配项</template>
</AsamSelectV2>
<output>原始值：{{ value }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
const value = ref(null);
// Stable group identities also avoid the fixed native top-level duplicate check.
const options = [
{
code: 'group-available',
title: '可用团队',
members: [
{ code: 'design', title: '设计' },
{ code: 'develop', title: '开发' }
]
},
{
code: 'group-disabled',
title: '停用团队',
members: [{ code: 'off', title: '停用', inactive: true }]
}
];
defineOptions({ name: 'AsamSelectV2NativeDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>自定义实体创建
这个示例同时展示默认普通记录和自定义数值实体；自定义工厂只构造本地实体，远端持久化仍由宿主明确执行。选择端不请求远端、不伪造实体字段。
完整实体创建、回填与清空
<template>
<div class="example">
<AsamSelectV2
v-model="record"
value-mode="object"
:options="[]"
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
placeholder="输入文本，创建普通记录"
/>
<AsamSelectV2
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 { AsamSelectV2, AsamButton } from '@asam-ui/ui';
import type { AsamOption, AsamRecord, AsamCreateOption, AsamSelectV2Expose } 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<AsamSelectV2Expose>();
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: 'AsamSelectV2CreateDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamSelectV2
v-model="record"
value-mode="object"
:options="[]"
allow-create
default-first-option
:reserve-keyword="false"
filterable
clearable
placeholder="输入文本，创建普通记录"
/>
<AsamSelectV2
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 { AsamSelectV2, 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: 'AsamSelectV2CreateDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
output {
overflow-wrap: anywhere;
}
</style>defaultFirstOption 允许输入后按 Enter 选择首项；创建选项同样遵循完整对象模型。reserveKeyword=false 在多选提交后清理查询词，不清理已创建集合。
自定义标签、加载与清空策略
tag 与 label 插槽提供展示和删除上下文，类型随值模式变化。 完整说明。
自定义标签、加载与清空策略
<template>
<div class="example">
<AsamSelectV2
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>
</AsamSelectV2>
<AsamCheckboxItem v-model="loading">切换加载状态</AsamCheckboxItem>
<output>已选：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamSelectV2, 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: 'AsamSelectV2CustomDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
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>
</AsamSelectV2>
<AsamCheckboxItem v-model="loading">切换加载状态</AsamCheckboxItem>
<output>已选：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamSelectV2, 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: 'AsamSelectV2CustomDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>异步查询回调
filterable + remote + remoteMethod 将输入交给调用方；基础 V2 不执行 provider 请求。 完整说明。
虚拟选项与异步查询回调
<template>
<div class="example">
<AsamSelectV2
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>
</AsamSelectV2>
<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2 } 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: 'AsamSelectV2SearchDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
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>
</AsamSelectV2>
<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2 } 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: 'AsamSelectV2SearchDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>原始对象的稳定身份
native 模式可以直接保存业务对象，以 valueKey 指定对象身份字段。 完整说明。
原始对象与 valueKey 身份
<template>
<div class="example">
<AsamSelectV2
v-model="single"
value-mode="native"
value-key="id"
:options="options"
clearable
aria-label="原始对象单选"
/>
<AsamSelectV2
v-model="multiple"
value-mode="native"
value-key="id"
:options="options"
multiple
clearable
:multiple-limit="2"
aria-label="原始对象多选"
/>
<AsamButton type="default" @click="single = { ...teams[0], name: '回填旧名称' }"
>回填同 id 的新对象</AsamButton
>
<output>原始单选：{{ single }}；原始多选：{{ multiple }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
interface Team {
id: number;
name: string;
owner: string;
}
const teams: Team[] = [
{ id: 1, name: '设计团队', owner: 'design' },
{ id: 2, name: '开发团队', owner: 'develop' },
{ id: 3, name: '停用团队', owner: 'disabled' }
];
const options = teams.map((team) => ({ label: team.name, value: team, disabled: team.id === 3 }));
const single = ref<Team | null>({ ...teams[0], name: '回填旧名称' });
const multiple = ref<Team[]>([teams[0]]);
defineOptions({ name: 'AsamSelectV2NativeObjectsDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
v-model="single"
value-mode="native"
value-key="id"
:options="options"
clearable
aria-label="原始对象单选"
/>
<AsamSelectV2
v-model="multiple"
value-mode="native"
value-key="id"
:options="options"
multiple
clearable
:multiple-limit="2"
aria-label="原始对象多选"
/>
<AsamButton type="default" @click="single = { ...teams[0], name: '回填旧名称' }"
>回填同 id 的新对象</AsamButton
>
<output>原始单选：{{ single }}；原始多选：{{ multiple }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
const teams = [
{ id: 1, name: '设计团队', owner: 'design' },
{ id: 2, name: '开发团队', owner: 'develop' },
{ id: 3, name: '停用团队', owner: 'disabled' }
];
const options = teams.map((team) => ({ label: team.name, value: team, disabled: team.id === 3 }));
const single = ref({ ...teams[0], name: '回填旧名称' });
const multiple = ref([teams[0]]);
defineOptions({ name: 'AsamSelectV2NativeObjectsDemo' });
</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">
<AsamSelectV2
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">
<AsamSelectV2
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">
<AsamSelectV2
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 { AsamSelectV2 } 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: 'AsamSelectV2DisplayDemo' });
</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">
<AsamSelectV2
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">
<AsamSelectV2
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">
<AsamSelectV2
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 { AsamSelectV2 } 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: 'AsamSelectV2DisplayDemo' });
</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>浮层宽度与固定行高
fitInputWidth=false 按选项内容计算宽度，true 对齐输入宽度，数字固定浮层宽度。itemHeight 指定固定行高，默认插槽保留自定义选项内容。estimatedOptionHeight 使用动态测量，参见下方动态行高示例；宽度策略与行高策略可以独立配置。
浮层宽度与固定行高
<template>
<div class="example">
<AsamSelectV2
v-for="(width, index) in widths"
:key="index"
v-model="values[index]"
:options="options"
:fit-input-width="width"
:item-height="36"
:height="180"
:aria-label="'浮层宽度 ' + index"
:popper-class="'layout-popup-' + index"
style="width: 240px"
>
<template #default="{ item }"
><span>{{ item?.label }} · 自定义选项内容</span></template
>
</AsamSelectV2>
<output>选择：{{ values }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
const widths = [false, true, 420];
const values = ref<(number | null)[]>([null, null, null]);
const options = Array.from({ length: 100 }, (_, value) => ({
value,
label: '布局选项 ' + value,
raw: { value }
}));
defineOptions({ name: 'AsamSelectV2LayoutDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
v-for="(width, index) in widths"
:key="index"
v-model="values[index]"
:options="options"
:fit-input-width="width"
:item-height="36"
:height="180"
:aria-label="'浮层宽度 ' + index"
:popper-class="'layout-popup-' + index"
style="width: 240px"
>
<template #default="{ item }"
><span>{{ item?.label }} · 自定义选项内容</span></template
>
</AsamSelectV2>
<output>选择：{{ values }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2 } from '@asam-ui/ui';
const widths = [false, true, 420];
const values = ref([null, null, null]);
const options = Array.from({ length: 100 }, (_, value) => ({
value,
label: '布局选项 ' + value,
raw: { value }
}));
defineOptions({ name: 'AsamSelectV2LayoutDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>动态行高与内容更新的兼容限制
estimatedOptionHeight、itemHeight 和列表插槽直接交给固定依赖 2.14.7 的原生虚拟列表。 完整说明。
固定 2.14.7 下，该完整示例首次挂载出现渲染无响应；替换为同输入的原生虚拟选择器，以及 ASAM native / advanced 两条路径均复现超时。因此动态行高示例保留为兼容限制的复现输入，渲染、内容更新和滚动功能尚未验证通过。可用的固定行高用法见 virtual / layout 示例。
本页展示完整 TS/JS 复现源码，不自动运行此输入；可切换语言、复制或下载完整文件，并通过“独立复现输入”链接单独查看。该展示方式不表示动态行高运行已通过验证。
真实动态行高与内容更新
固定依赖 2.14.7 下，此输入首次挂载会出现渲染无响应；动态行高、内容更新和滚动运行尚未通过验证。这里保留完整 TS/JS 复现源码，固定行高的可运行用法见 virtual / layout 示例。 独立复现输入；选择下方 TS/JS 后下载 Demo.vue。
<template>
<div class="example">
<AsamSelectV2
v-model="selected"
:options="options"
:estimated-option-height="40"
:height="180"
:fit-input-width="420"
filterable
aria-label="可变行高选项"
@end-reached="direction = $event"
>
<template #default="{ item, index }"
><div
:style="{
minHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',
whiteSpace: 'normal',
lineHeight: '20px'
}"
>
{{ item?.label }}
</div></template
>
</AsamSelectV2>
<AsamButton type="default" @click="tall = !tall">切换实际内容高度</AsamButton>
<output>选择：{{ selected }}；方向：{{ direction }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
const options = Array.from({ length: 100 }, (_, value) => ({
value,
label: '动态选项 ' + value,
raw: { value }
}));
const selected = ref<number | null>(null);
const tall = ref(false);
const direction = ref('');
defineOptions({ name: 'AsamSelectV2DynamicDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSelectV2
v-model="selected"
:options="options"
:estimated-option-height="40"
:height="180"
:fit-input-width="420"
filterable
aria-label="可变行高选项"
@end-reached="direction = $event"
>
<template #default="{ item, index }"
><div
:style="{
minHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',
whiteSpace: 'normal',
lineHeight: '20px'
}"
>
{{ item?.label }}
</div></template
>
</AsamSelectV2>
<AsamButton type="default" @click="tall = !tall">切换实际内容高度</AsamButton>
<output>选择：{{ selected }}；方向：{{ direction }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
const options = Array.from({ length: 100 }, (_, value) => ({
value,
label: '动态选项 ' + value,
raw: { value }
}));
const selected = ref(null);
const tall = ref(false);
const direction = ref('');
defineOptions({ name: 'AsamSelectV2DynamicDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
原生委托与高级对象标签
native 的 tag scope 使用固定依赖公开的 Option[]；value、label、disabled 及自定义字段遵循原生 options/props 映射。 完整说明。
原生选项标签与删除回调
<template>
<div class="demo-root-layout">
<AsamSelectV2
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.disabled"
@click.stop="deleteTag($event, option)"
>
{{ option.label }}
</AsamButton>
</template>
</AsamSelectV2>
<output>已选：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamSelectV2 } from '@asam-ui/ui';
defineOptions({ name: 'AsamSelectV2NativeTagExample' });
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">
<AsamSelectV2
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.disabled"
@click.stop="deleteTag($event, option)"
>
{{ option.label }}
</AsamButton>
</template>
</AsamSelectV2>
<output>已选：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamSelectV2 } from '@asam-ui/ui';
defineOptions({ name: 'AsamSelectV2NativeTagExample' });
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" 直接使用依赖中的原生虚拟选择器，过滤、创建、IME、键盘、虚拟滚动与原生一致。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamSelectV2Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
separator | — | undefined | string | undefined | ',' |
valueMode | — | enum"native" | "value" | "object"完整类型："native" | "value" | undefined | "object" | 'value' |
multipleValueMode | — | enum"array" | "string"完整类型：undefined | "array" | undefined | "string" | undefined |
ariaLabel | 等价于原生 input aria-label 属性 | string | undefined | — |
id | 原生 input 的 id | string | undefined | — |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamSelectV2Props<V, I>)["effect"] | "light" |
popperClass | 为 Tooltip 的 popper 添加自定义类名 | AsamSelectV2NativeProps["popperClass"] | undefined |
popperStyle | Select 下拉菜单和标签提示的自定义样式 | (AsamSelectV2Props<V, I>)["popperStyle"] | undefined |
fallbackPlacements | dropdown 可用的 positions 请查看popper.js 文档 | (AsamSelectV2Props<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"完整类型：(AsamSelectV2Props<V, I>)["placement"] | "bottom-start" |
popperOptions | Popper 配置参数。 | (AsamSelectV2Props<V, I>)["popperOptions"] | 工厂函数（每个实例创建） |
showArrow | 下拉菜单的内容是否有箭头 | (AsamSelectV2Props<V, I>)["showArrow"] | true |
appendTo | 下拉框挂载到哪个 DOM 元素 | (AsamSelectV2Props<V, I>)["appendTo"] | — |
persistent | 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 | (AsamSelectV2Props<V, I>)["persistent"] | true |
teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | (AsamSelectV2Props<V, I>)["teleported"] | true |
disabled | 指定选项的禁用为选项对象的某个属性值 | (AsamSelectV2Props<V, I>)["disabled"] | undefined |
tabindex | input 的 tabindex | (AsamSelectV2Props<V, I>)["tabindex"] | 0 |
height | 下拉菜单的高度，每一个选项为34px | number | undefined | 274 |
scrollbarAlwaysOn | 是否总是展示滚动条 | boolean | undefined | false |
props | 配置选项，具体看下表 | (AsamSelectV2Props<V, I>)["props"] | 工厂函数（每个实例创建） |
name | 选择器的原生name属性 | string | undefined | — |
modelValue | 选中项绑定值 | 查看完整类型any | V | null | undefined | AsamSelectOption<V, I> | null | undefined | readonly V[] | undefined | string | undefined | readonly AsamSelectOption<V, I>[] | undefined | undefined |
loading | 是否从远程加载数据 | boolean | undefined | false |
filterMethod | 自定义筛选方法的第一个参数是当前输入的值。当filterable设置为 true 时才会生效 | ((query: string) => void) | undefined | — |
options | 指定选项的子选项为选项对象的某个属性值 | (AsamSelectV2Props<V, I>)["options"] | readonly AsamSelectOption<V, I>[] | undefined | () => [] |
multiple | 是否多选 | boolean | undefined | false | undefined | true | false |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamSelectV2Props<V, I>)["valueOnClear"] | undefined |
validateEvent | 是否触发表单验证 | boolean | undefined | true |
clearable | 是否可以清空选项 | boolean | undefined | false |
automaticDropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamSelectV2Props<V, I>)["clearIcon"] | {"name":"CircleClose","__name":"circle-close"} |
placeholder | 占位文字 | string | undefined | undefined |
autocomplete | 自动完成选择输入 | enum"none" | "inline" | "both" | "list"完整类型：(AsamSelectV2Props<V, I>)["autocomplete"] | "none" |
filterable | Select 组件是否可筛选 | boolean | undefined | false |
allowCreate | 是否允许创建新条目，当使用该属性时，filterable必须设置为true | boolean | undefined | false | undefined | true | false |
remote | 是否从服务器获取数据 | boolean | undefined | false |
debounce | 远程搜索时的防抖延迟（以毫秒为单位） | number | undefined | 300 |
loadingText | 从服务器加载数据时显示的文本，默认为“Loading” | string | undefined | — |
noMatchText | 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” | string | undefined | — |
noDataText | 当在没有数据时显示的文字，你同时可以使用empty插槽进行设置。 | string | undefined | — |
remoteMethod | 当输入值发生变化时触发的函数。它的参数就是当前的输入值。当filterable设置为 true 时才会生效 | ((query: string) => void) | undefined | — |
multipleLimit | 多选时可被选择的最大数目。当被设置为0时，可被选择的数目不设限。 | number | undefined | 0 |
defaultFirstOption | 是否在输入框按下回车时，选择第一个匹配项。需配合 filterable 或 remote 使用 | boolean | undefined | false |
reserveKeyword | 筛选时，是否在选择选项后保留关键字 | (AsamSelectV2Props<V, I>)["reserveKeyword"] | true |
valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | undefined | "value" |
collapseTags | 多选时是否将选中值按文字的形式展示 | boolean | undefined | false |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此功能，collapse-tags的值必须为true | boolean | undefined | false |
tagTooltip | 折叠标签工具提示的配置对象。要使用此项， collapse-tags 和 collapse-tags-tooltip 必须为 true | (AsamSelectV2Props<V, I>)["tagTooltip"] | 工厂函数（每个实例创建） |
maxCollapseTags | 需要显示的 Tag 的最大数量。只有当 collapse-tags 设置为 true 时才会生效。 | number | undefined | 1 |
fitInputWidth | 无论下拉框的宽度是否与输入框相同，如果值为number，则宽度是固定的。 | (AsamSelectV2Props<V, I>)["fitInputWidth"] | true |
suffixIcon | 自定义后缀图标组件 | (AsamSelectV2Props<V, I>)["suffixIcon"] | {"name":"ArrowDown","__name":"arrow-down"} |
tagType | 标签类型 | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamSelectV2Props<V, I>)["tagType"] | "info" |
tagEffect | 标签效果 | enum"light" | "dark" | "plain"完整类型：(AsamSelectV2Props<V, I>)["tagEffect"] | "light" |
remoteShowSuffix | 远程搜索方法显示后缀图标 | boolean | undefined | false |
estimatedOptionHeight | 控制虚拟列表大小模式：如果未定义，则列表使用来自 item-height 的固定项目高度；如果提供，则列表使用动态项目大小，并将此值作为估计的项目高度。 | number | undefined | undefined |
itemHeight | 下拉项的高度 | number | undefined | 34 |
size | 组件大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
createOption | — | AsamCreateOption<V, I> | undefined | — |
事件 AsamSelectV2Emits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamSelectAnyModelValue] | — |
change | — | [value: AsamSelectAnyModelValue] | — |
clear | — | (AsamSelectV2Emits)["clear"] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
visible-change | — | [visible: boolean] | — |
remove-tag | — | [value: unknown] | — |
end-reached | — | [direction: AsamScrollbarDirection] | — |
插槽 AsamSelectV2Slots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | ((props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }) => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
tag | — | (AsamSelectV2Slots)["tag"] | — |
label | — | 查看完整类型((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
实例方法与状态 AsamSelectV2Expose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | 聚焦原生输入控件。 | () => void | — |
blur | — | () => void | — |
selectedLabel | 原生模式读取依赖的实时标签；对象模式解析 ASAM 选项标签。 | string | string[] | — |
clearCreatedOptions | 仅在逻辑数据来源或作用域变化时重置本地创建项，不因搜索、刷新或错误重置。 | () => void | — |
用法与契约补充说明
虚拟选项与列表插槽
在固定依赖 2.14.7 / Vue 3.5.34 的已核验输入中，首次挂载未提供 default 插槽，随后向同一实例动态新增该插槽时，新内容未显示；原生虚拟选择器与 ASAM native 路径结果一致。首次挂载即提供 default 的新实例对照能够显示内容。因此这项“初始缺省 → 动态新增”表现属于原生兼容限制，不保证新增内容可见。内容替换、删除和其他插槽按各自独立核验结果判断。
ASAM 扩展与迁移
ASAM 扩展为四档密度、规范化 options、valueMode、multipleValueMode 与 separator。原始对象值必须显式 native 并配置 valueKey；object 模式保存规范化 option，raw 保留业务原件。空单选为 null，空多选为 [] 或空字符串。未解析值不会自动发起请求。loading、remote、remoteMethod 只是调用方控制的检索入口，异步生命周期使用本站 Remote 组件。
来源接管本地创建项
对象创建先返回工厂提供的完整选项。来源随后提供同 value 的规范项时，清空模型并重新选择原创建文本会返回来源的 label/value/raw；可见选中标签与实例 selectedLabel 使用规范标签，即使工厂或来源标签不包含输入文本也成立。清空模型保留创建集合，clearCreatedOptions() 保留当前模型。这里用宿主更新静态 options 演示接管；真实远程生命周期由 Remote/Dict 组件承接。
大列表过滤、末端事件和对象创建
虚拟列表只渲染视口附近的行，height 控制视口、itemHeight 控制行高。过滤后最后一项仍可选，已选标签在列表关闭及再次过滤时保留。end-reached(direction) 是原生虚拟列表的真实末端事件；没有把普通滚动回调改名。默认插槽接收规范化 item/index/disabled，native 模式可用 props 映射自定义字段及分组。
大列表过滤、末端事件和对象创建
对象创建与 Select 共用 createOption 契约：普通记录自动构造完整 label/value/raw，自定义实体必须传同步工厂；清空返回 null/数组空值，按实际 value 类型去重。clearCreatedOptions() 仅重置本地创建集合，逻辑 source/scope 改变才调用，搜索/刷新/错误不清理。
原始字段映射与分组
valueMode="native" 使用原始 options，props.options 映射组的子项字段，value/label/disabled 分别映射单项身份、文字和禁用标记。分组标题与禁用项仍属于虚拟列表的真实行。native 原始对象模式配合 valueKey；规范化 ASAM object 模式不混用原始字段映射。
异步查询回调
filterable + remote + remoteMethod 将输入交给调用方；基础 V2 不执行 provider 请求。 示例在本地模拟异步过滤，使用 generation 拒绝迟到结果。debounce 控制回调延迟， remoteShowSuffix 保留后缀。完整请求与来源生命周期使用本站 RemoteSelectV2。
原始对象的稳定身份
native 模式可以直接保存业务对象，以 valueKey 指定对象身份字段。回填同 id 的新对象时， 标签由对应来源选项显示；选中后返回原始 value 对象，不额外套 ASAM option / raw。 单选清空与多选空数组遵循原生模式，disabled 选项不能选取，multipleLimit 约束多选数量。
空字符串、清空与默认折叠标签
空字符串可以是有效选项；native 模式的 emptyValues 明确排除空字符串，valueOnClear 明确返回 null。默认 tag 渲染下，显式 tagTooltip 配置优先于继承的 popperClass/effect；maxCollapseTags 控制保留的可见标签数。自定义 tag 插槽会接管默认标签布局，因此另用这个完整示例验证默认折叠浮层。
动态行高与内容更新的兼容限制
estimatedOptionHeight、itemHeight 和列表插槽直接交给固定依赖 2.14.7 的原生虚拟列表。示例提供不同内容高度并允许更新内容；实际测量、缓存和滚动遵循原生限制，ASAM 不添加测量器、VNode 高度修补或重置缓存。未设置 estimatedOptionHeight 时使用原生固定行高分支。
API 阅读方式
高级 value/object 模式默认 placeholder 为“请选择”；valueMode="native" 保留原生省略值、显式 undefined/null/false 和默认值，可显式覆盖；显式 popperClass 保留并追加当前密度类。旧 popperAppendToBody 已移除，使用 teleported 决定是否传送浮层，再用 appendTo 指定传送目标。
原生委托与高级对象标签
native 的 tag scope 使用固定依赖公开的 Option[]；value、label、disabled 及自定义字段遵循原生 options/props 映射。deleteTag 接收 MouseEvent 与该原生项。此类型和经典 Select 的 OptionBasic 分开，不把原生项降为 unknown。
原生委托与高级对象标签
valueMode="native" 直接使用依赖中的原生虚拟选择器，过滤、创建、IME、键盘、虚拟滚动与原生一致。高级 object 模式将 createOption 返回的完整选项存入本地集合；通过公开 label 插槽显示规范化标签，不修改原生 selectedLabel 或内部 states。实例 selectedLabel 在 native 模式直接读取原生值，在 object 模式读取规范化选项标签；自定义 label 插槽仍优先。原生键盘创建或动态行高问题按同输入原生实例记录，不能由包装层接管。
更多参数与事件说明
自定义标签、加载与清空策略
tag 插槽接收 data、selectDisabled、deleteTag，label 接收 index、label、value；index 为 number，label/value 沿用原生公开槽的开放类型，具体操作须与实际选项值匹配； 默认渲染支持 collapseTags、maxCollapseTags、collapseTagsTooltip 与 tagTooltip 的 显式字段优先和浮层配置继承。自定义 tag 应自行选择布局。multipleLimit 限制选中数， loading / empty 插槽显示加载及无结果。emptyValues / valueOnClear 控制空值及清空值。 fitInputWidth 为数字时固定下拉宽度，为布尔值时选择与输入对齐或自适应内容。 estimatedOptionHeight 开启动态项高估计，未提供时使用 itemHeight 固定项高。
关联组件
参数与事件补充说明
使用与 AsamSelect 相同的值策略，通过虚拟选项列表渲染。
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
separator
必填：否；声明来源：ASAM 声明。
默认值与来源
','（源码表达式；ASAM 声明）valueMode
必填：否；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："native"
枚举："value"
枚举："object"
默认值与来源
'value'（源码表达式；ASAM 声明）multipleValueMode
必填：否；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："array"
枚举："string"
默认值与来源
undefined（源码表达式；ASAM 声明）ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
"light"（已安装运行时；已安装组件）固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
["bottom-start","top-start","right","left"]（已安装运行时；已安装组件）固定上游文档默认：['bottom-start', 'top-start', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
offset
必填：否；声明来源：上游声明。
默认值与来源
12（已安装运行时；已安装组件）固定上游文档默认：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 源码 / 安装包为准）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamSelectV2Props<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<(AsamSelectV2Props<V, I>)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showArrow
必填：否；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
height
必填：否；声明来源：ASAM 声明。
默认值与来源
274（已安装运行时；已安装组件）scrollbarAlwaysOn
必填：否；声明来源：上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（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 源码 / 安装包为准）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
modelValue
必填：否；声明来源：上游声明。
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 协议
默认值与来源
undefined（源码表达式；ASAM 声明）来源分支 1
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
filterMethod
必填：否；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
options
必填：否；声明来源：上游声明。
options 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
() => []（源码表达式；ASAM 声明）来源分支 1
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multiple
必填：否；声明来源：上游声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false
枚举：true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 1
固定上游文档默认：false（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
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSelectV2Props<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 源码 / 安装包为准）
placeholder
必填：否；声明来源：上游声明。
默认值与来源
undefined（源码表达式；ASAM 声明）固定上游文档默认：Please select（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
autocomplete
必填：否；声明来源：上游声明。
autocomplete 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："none" / "inline" / "both" / "list"
默认值与来源
"none"（已安装运行时；已安装组件）固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
filterable
必填：否；声明来源：上游声明。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
allowCreate
必填：否；声明来源：上游声明。
allowCreate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false / true
枚举：false
枚举：true
默认值与来源
false（隐式 Boolean 默认；已安装组件）来源分支 1
固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remote
必填：否；声明来源：上游声明。
remote 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
debounce
必填：否；声明来源：上游声明。
默认值与来源
300（已安装运行时；已安装组件）固定上游文档默认：300（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
loadingText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noMatchText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noDataText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：No Data（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remoteMethod
必填：否；声明来源：上游声明。
remoteMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multipleLimit
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（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 源码 / 安装包为准）
valueKey
必填：否；声明来源：上游声明。
默认值与来源
"value"（已安装运行时；已安装组件）固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTags
必填：否；声明来源：上游声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTagsTooltip
必填：否；声明来源：上游声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagTooltip
必填：否；声明来源：上游声明。
tagTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
tagTooltip.appendTo:string | HTMLElement | undefined— 上游声明指示 Tooltip 的内容将附加在哪一个网页元素上
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.placement:PublicMember<NonNullable<(AsamSelectV2Props<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:AsamSelectV2NativeProps["fallbackPlacements"]— 上游声明提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。
固定上游文档默认：
['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.effect:PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["tagTooltip"]>, "effect">— 上游声明Tooltip 主题，内置了 dark / light 两种
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"light"/"dark"tagTooltip.popperClass:string | undefined— 上游声明为 Tooltip 的 popper 添加自定义类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperStyle:PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["tagTooltip"]>, "popperStyle">— 上游声明为 Tooltip 的 popper 添加自定义样式
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.transition:string | undefined— 上游声明动画名称
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.teleported:boolean | undefined— 上游声明是否使用 teleport。设置成 true则会被追加到 append-to 的位置
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truetagTooltip.popperOptions:AsamSelectV2NativeProps["popperOptions"]— 上游声明Popper 配置参数。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperOptions.placement:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectV2Props<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<(AsamSelectV2Props<V, I>)["tagTooltip"]>, "popperOptions">>, "modifiers">— 依赖声明tagTooltip.popperOptions.strategy:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["tagTooltip"]>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"tagTooltip.popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectV2Props<V, I>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamSelectV2Props<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 源码 / 安装包为准）
maxCollapseTags
必填：否；声明来源：上游声明。
默认值与来源
1（已安装运行时；已安装组件）固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fitInputWidth
必填：否；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
suffixIcon
必填：否；声明来源：上游声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamSelectV2Props<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 源码 / 安装包为准）
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 源码 / 安装包为准）
estimatedOptionHeight
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
itemHeight
必填：否；声明来源：ASAM 声明。
默认值与来源
34（已安装运行时；已安装组件）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）createOption
必填：按分支；声明来源：ASAM 声明。
createOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(text: string): AsamOption<V, I>
AsamSelectV2Props 公开类型视图
import type { Attrs } from 'vue';
import type { AsamSelectV2Props, AsamValue, AsamRecord, AsamSelectV2NativeProps, AsamControlSize, AsamSelectOption, AsamOption, AsamCreateOption } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamSelectV2Props
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = AsamSelectV2Props<V, I>;参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
remove-tag
必填：是；声明来源：ASAM 声明。
end-reached
必填：是；声明来源：ASAM 声明。
AsamSelectV2Emits 公开类型视图
import type { AsamSelectV2Emits, AsamSelectAnyModelValue, AsamScrollbarDirection } from '@asam-ui/ui';
// AsamSelectV2Emits
type PublicContract = {
"update:modelValue": [value: AsamSelectAnyModelValue];
"change": [value: AsamSelectAnyModelValue];
"clear": (AsamSelectV2Emits)["clear"];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"visible-change": [visible: boolean];
"remove-tag": [value: unknown];
"end-reached": [direction: AsamScrollbarDirection];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }): unknown
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamSelectV2Slots)["tag"]>, (...args: never[]) => unknown>>[0]): unknown
label
必填：否；声明来源：ASAM 声明。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }): unknown
empty
必填：否；声明来源：ASAM 声明。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamSelectV2Slots 公开类型视图
import type { AsamSelectV2Slots, AsamValue, AsamOption, AsamSelectV2NativeProps } from '@asam-ui/ui';
// AsamSelectV2Slots
type PublicContract = {
"default"?: ((props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }) => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"tag"?: (AsamSelectV2Slots)["tag"];
"label"?: ((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
selectedLabel
必填：是；声明来源：ASAM 声明。
clearCreatedOptions
必填：是；声明来源：ASAM 声明。
clearCreatedOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamSelectV2Expose 公开类型视图
import type { AsamSelectV2Expose } from '@asam-ui/ui';
// AsamSelectV2Expose
type PublicContract = {
"focus": () => void;
"blur": () => void;
readonly "selectedLabel": string | string[];
"clearCreatedOptions": () => void;
};