Select 选择器

基于 reka-ui 的组合式选择器。选项较少时也可用 [Radio](/components-library/reui/components/data-entry/radio)。

下拉选择器，支持搜索、分组、异步加载等。基于 reka-ui SelectRoot 封装。

何时使用

  • 需要从一组选项中选择一个或多个值时。
  • 选项数量较多（> 5）时，比 Radio 更节省空间。

导入

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from "@reglow/reui";

代码演示

基础用法

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

const value = ref("");
</script>

<template>
  <Select v-model="value">
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="请选择" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">苹果</SelectItem>
      <SelectItem value="banana">香蕉</SelectItem>
      <SelectItem value="cherry">樱桃</SelectItem>
    </SelectContent>
  </Select>
</template>

禁用选项

<template>
  <Select>
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="请选择" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">苹果</SelectItem>
      <SelectItem value="banana" disabled>香蕉（已售罄）</SelectItem>
      <SelectItem value="cherry">樱桃</SelectItem>
    </SelectContent>
  </Select>
</template>

分组

使用 SelectGroup 分组，SelectLabel 添加分组标题。

<template>
  <Select>
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="请选择" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>水果</SelectLabel>
        <SelectItem value="apple">苹果</SelectItem>
        <SelectItem value="banana">香蕉</SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectLabel>蔬菜</SelectLabel>
        <SelectItem value="tomato">番茄</SelectItem>
        <SelectItem value="cucumber">黄瓜</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>

尺寸

通过 SelectTrigger 的 size 属性控制尺寸，支持 small / medium / large（默认 default，等价 medium），字号随尺寸切换为 text-xs / text-sm / text-base。

<template>
  <Select>
    <SelectTrigger size="small" class="w-[180px]">
      <SelectValue placeholder="小尺寸" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">选项 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="medium" class="w-[180px]">
      <SelectValue placeholder="默认尺寸" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">选项 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="large" class="w-[180px]">
      <SelectValue placeholder="大尺寸" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">选项 1</SelectItem>
    </SelectContent>
  </Select>
</template>

API

Select Props

参数说明类型默认值
modelValue当前选中值（v-model）AcceptableValue-
defaultValue默认值AcceptableValue-
disabled是否禁用booleanfalse
name表单字段名string-
required是否必填booleanfalse

SelectTrigger Props

参数说明类型默认值
size尺寸（兼容旧写法 sm / default / lg）"small" | "medium" | "large" | "sm" | "default" | "lg""default"
class附加类名string-

SelectContent Props

参数说明类型默认值
position定位方式"item-aligned" | "popper""item-aligned"
class附加类名string-

SelectItem Props

参数说明类型默认值
value选项值AcceptableValue-
disabled是否禁用booleanfalse
class附加类名string-

组件组成

组件说明
Select根容器（reka-ui SelectRoot props）
SelectTrigger触发器，含下拉箭头
SelectValue展示选中值 / 占位文字
SelectContent下拉内容面板
SelectItem选项
SelectGroup分组容器
SelectLabel分组标签
SelectSeparator分隔线
SelectScrollUpButton向上滚动按钮
SelectScrollDownButton向下滚动按钮
SelectItemText选项文本（用于跨组件展示选中值）
Segmented 分段控制器
Segmented 分段控制器
SlideCaptcha 滑动验证码
滑动拼图完成人机验证