切换主题
YSelect
适用范围:Legacy Admin Kit / Schema 与旧
admin-vue。新admin-nuxtui的开发入口见管理端 Nuxt UI 指南。
定位 / Owner
YSelect 是单选/多选 stable facade。父级值仍是 authoritative state;组件用最小 pending acknowledgement 处理 delayed/stale echo,不建立第二 Form state owner。
什么时候使用
- 有限静态选项的单选或多选。
- 需要 disabled option、placeholder、compact density。
- Dialog/Drawer 内嵌下拉,需要共享 overlay stack 正确处理 Escape/portal。
不什么时候使用
- 远程搜索、Tree Select、复杂级联不是这个组件的默认能力;没有正式 extension 时不要伪装成普通 Select。
- 不要读取
.y-select__content等内部 DOM 作为业务 contract。
基础用法
vue
<YSelect
v-model="status"
:options="[
{ value: '', label: '全部' },
{ value: 'enabled', label: '启用' },
{ value: 'disabled', label: '停用' },
]"
/>vue
<YSelect v-model="tags" multiple :options="tagOptions" />Public API
| API | 说明 |
|---|---|
v-model | string | string[] |
options | { value, label, disabled? }[] |
multiple | 多选模式 |
disabled | 整体禁用 |
compact | 紧凑密度 |
placeholder | 无值提示 |
Composition
Schema 的 select / multi-select 由 YSchemaForm 投影到本组件。远程/树形语义应由正式 extension owner 处理。
Live Workbench
Admin Vue 稳定路径:
/frontend-module-demo/component-workbench/select
该路径只标识 live scenario,不固化部署 Host;官方文档站与 Admin Vue 可以独立部署。
Verification / Source
packages/yoyo-admin/admin-kit/src/ui/components/select/YSelect.vuetests/unit/ui/select/y-select-controlled-model.spec.ts- Live Component Workbench