Select - 选择器

更新日期

2026-10-04 UTC

Demo

当前：（未选）

选择器：定位、键盘导航、首字母检索、滚动基于 reka-ui，外观走 token。

Props

属性	说明	类型	默认值
`v-model`	选中值	`string`	—
`options`	选项 `{ label, value, disabled?, color? }`	`SelectOption[]`	—
`placeholder`	占位文案	`string`	`请选择`
`disabled`	禁用	`boolean`	`false`

id、class、style、aria-label 和 aria-labelledby 等属性会传给触发按钮。使用可见标签时，通过 <label for="…"> 与组件的 id 关联；没有标签时可传入 aria-label，否则使用占位文案。v-model 和选项值支持字符串联合类型。

下拉面板默认挂载到页面根部。局部明暗主题可通过 Reka UI 的 ConfigProvider 将 teleport-to 指向主题容器中的元素，确保面板继承同一套 token；容器应允许浮层溢出。首页的颜色与强调样式选择器使用的就是本组件。

色点预览

选项的 color 是可选 CSS 色值，支持 var(--ylf-*)。设置后，下拉列表和当前选中值会显示同色圆点；不设置时保持普通文本选择器。色点仅作视觉辅助，颜色名称和选中勾选仍保留。

vue

<script setup lang="ts">
import { ref } from 'vue'

const tone = ref('blue')
const options = [
  { value: 'blue', label: '晴空蓝', color: 'var(--ylf-accent-blue)' },
  { value: 'sun', label: '明黄', color: 'var(--ylf-accent-sun)' },
]
</script>

<template>
  <YlfSelect v-model="tone" :options="options" aria-label="强调色" />
</template>

使用 token 时，色点会随所在主题更新；页面和浮层需处于同一主题范围。

工作台密度与图标

size="sm" 使用 34px 高度、紧凑文字与 10px 圆角，适合排序、项目范围等工具栏控件；默认 md 保持 44px 表单尺寸。触摸设备中紧凑选择器与选项仍至少 44px。#icon 和 #indicator 可传入应用已有的 UnoCSS / Iconify 图标；未提供时保留内置 SVG。

表单与局部主题

name?: string 和 required?: boolean（默认 false）传给底层表单控件。放在 <form> 内时，选择值进入原生 FormData；禁用字段不提交。id、aria-label、aria-labelledby、class 和事件传给触发按钮。使用实际字段名称作为可访问名称，例如 aria-label="主题颜色" 或关联的 <label for>。

portalTo?: string | HTMLElement 指定已存在的浮层容器，例如 portal-to="#settings-portals"。容器应位于页面相同的 .ylf-theme-light / .ylf-theme-dark 边界中。不传时保留 Reka UI 的 ConfigProvider 配置，最终回退到 body。

Select - 选择器 ​

Demo ​

Props ​

色点预览 ​

工作台密度与图标 ​