Combobox 组合框

带搜索的下拉选择，从选项列表中筛选并选中。另有 `EditableCombobox` 允许输入列表外的值。

何时使用

  • 需要可搜索、可自由输入的选择框时。
  • 选项较多、需要筛选过滤时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import { Combobox, type ComboboxOption } from "@reglow/reui";

const value = ref<string | number>();
const options: ComboboxOption[] = [
  { label: "苹果", value: "apple" },
  { label: "香蕉", value: "banana" },
  { label: "樱桃", value: "cherry" },
];
</script>

<template>
  <Combobox v-model="value" :options="options" />
</template>

导入

import { Combobox, EditableCombobox, type ComboboxOption } from "@reglow/reui";

Props

属性类型默认值说明
modelValuestring | number-选中值（v-model）
optionsComboboxOption[][]选项：{ label, value }
placeholderstring跟随语言占位文字
emptyTextstring跟随语言无匹配提示
sizestringmedium尺寸，支持 small / medium / large（触发按钮高度 32 / 36 / 44px）
disabledbooleanfalse禁用

size 对 Combobox 与 EditableCombobox 同时生效；0.6.5 起 combobox 由 components/ui 迁至 components/reui，@reglow/reui/ui/combobox 旧路径继续可用，新主路径为 @reglow/reui/reui/combobox。

国际化

placeholder、emptyText、搜索框占位等文案默认跟随全局语言（zh-CN / zh-TW / en-US），传 prop 可覆盖。

CodeEditor 代码编辑器
CodeEditor 代码编辑器
Command 命令面板
命令面板（Command Palette）基础组件，提供快速搜索并选择命令/操作的组合式 UI，常用于全局搜索、快捷键唤起等场景。