Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
基础用法
适用广泛的基础单选。
基础用法
禁用选项
在选项中设置 disabled 属性可以禁用该选项。
禁用选项
禁用状态
使用 disabled 属性禁用整个选择器。
选项一
禁用状态
可清空单选
设置 clearable 属性可以清空已选项。
选项一
可清空
多选
设置 multiple 属性可以启用多选，此时 v-model 的值为当前选中值所组成的数组。
多选
折叠标签
多选时，使用 collapse-tags 属性折叠标签。
选项一选项二 +1
折叠标签
可搜索
设置 filterable 属性可以启用搜索功能。
可搜索
远程搜索
设置 remote 和 remote-method 属性可以从服务器搜索数据。
远程搜索
创建条目
设置 allow-create 属性允许用户创建新条目。需配合 filterable 使用。
创建条目
虚拟滚动
当选项数量较大时，可以使用虚拟滚动来优化性能。设置 virtual-scroll 属性启用虚拟滚动。
虚拟滚动
虚拟滚动完整配置
通过 item-height 和 height 属性可以自定义虚拟滚动的行高和容器高度。
virtual-scroll: 启用虚拟滚动item-height: 每个选项的高度（默认 34px）height: 下拉框容器高度（默认 274px）
虚拟滚动完整配置
不同尺寸
使用 size 属性改变选择器大小。
不同尺寸
在 Nuxt 中使用
Select 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入，无需手动注册。
Nuxt 中使用
SSR 注意事项：
- ✅ 基础选择功能完全支持
- ✅ 多选及折叠标签支持
- ✅ 选项分组及搜索支持
- ✅ 远程搜索支持
- ✅ 虚拟滚动（SSR 时初始化为基础模式，客户端激活后自动开启优化）
- ⚠️ DOM 方法如
focus()、blur()必须在onMounted中调用
SSR 安全性
Select 组件已通过完整的 SSR 测试，确保服务端和客户端渲染的 HTML 结构完全一致，兼容 Nuxt 的 Hydration 流程。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string | number | boolean | array | — |
| options | 选项数据 | SelectOption[] | [] |
| placeholder | 占位文本 | string | — |
| disabled | 是否禁用 | boolean | false |
| clearable | 是否可清空 | boolean | false |
| size | 输入框尺寸 | 'large' | 'default' | 'small' | 'default' |
| multiple | 是否多选 | boolean | false |
| multiple-limit | 多选时最多可选数量，0 为不限制 | number | 0 |
| filterable | 是否可搜索 | boolean | false |
| filter-method | 自定义过滤方法 | (query: string) => void | — |
| remote | 是否远程搜索 | boolean | false |
| remote-method | 远程搜索方法 | (query: string) => void | — |
| loading | 是否正在加载 | boolean | false |
| loading-text | 加载文本 | string | '加载中...' |
| no-match-text | 无匹配数据文本 | string | '无匹配数据' |
| no-data-text | 无数据文本 | string | '无数据' |
| allow-create | 是否允许创建新选项 | boolean | false |
| collapse-tags | 是否折叠标签 | boolean | false |
| max-collapse-tags | 最大折叠标签数 | number | 1 |
| virtual-scroll | 是否启用虚拟滚动 | boolean | false |
| item-height | 虚拟滚动项高度 | number | 34 |
| height | 虚拟滚动容器高度 | number | 274 |
| teleported | 是否将下拉框插入到 body | boolean | true |
| fit-input-width | 下拉框宽度是否与输入框一致 | boolean | true |
| tag-type | 标签类型 | 'success' | 'info' | 'warning' | 'danger' | '' | '' |
| value-key | 值的键名 | string | 'value' |
| label-key | 标签的键名 | string | 'label' |
SelectOption
| 属性名 | 说明 | 类型 | 必填 |
|---|---|---|---|
| value | 选项值 | string | number | boolean | 是 |
| label | 选项标签 | string | 是 |
| disabled | 是否禁用 | boolean | 否 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值变化时触发 | (value: any) => void |
| focus | 获取焦点时触发 | (event: FocusEvent) => void |
| blur | 失去焦点时触发 | (event: FocusEvent) => void |
| clear | 点击清空按钮时触发 | () => void |
| visible-change | 下拉框显示/隐藏时触发 | (visible: boolean) => void |
| remove-tag | 多选模式下移除标签时触发 | (value: any) => void |
Slots
| 插槽名 | 说明 | 作用域 |
|---|---|---|
| default | 自定义选项内容 | { option: SelectOption } |
| prefix | 输入框前缀内容 | — |
| empty | 无数据时的内容 | — |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| focus | 使 select 获取焦点 | () => void |
| blur | 使 select 失去焦点 | () => void |
主题变量
Select 组件使用以下 CSS 变量，你可以通过覆盖这些变量来自定义样式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-select-border-color | 边框颜色 | var(--yh-border-color) |
--yh-select-hover-border-color | 悬停边框色 | var(--yh-border-color-hover) |
--yh-select-focus-border-color | 聚焦边框色 | var(--yh-color-primary) |
--yh-select-disabled-bg-color | 禁用背景色 | var(--yh-fill-color-light) |
--yh-select-tag-bg-color | 标签背景色 | var(--yh-fill-color) |