InputSelect 输入选择器

既可以从预设选项中选择，也允许自由输入（按 Enter 确认），支持单选和多选，适用于标签输入、自定义值选择等场景。

何时使用

  • 需要输入与下拉选择结合（既可输入又可选择）时。

基础用法

支持字符串数组或 { label, value } 对象数组作为选项。

<script setup lang="ts">
import { ref } from "vue";
import { InputSelect } from "@reglow/reui";

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

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

字符串数组选项

直接传入字符串数组作为选项。

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

const value = ref("");
const options = ["Apple", "Banana", "Cherry"];
</script>

<template>
  <InputSelect v-model="value" :options="options" placeholder="选择或输入水果" />
</template>

多选

设置 multiple 开启多选模式，绑定值为数组。

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

const value = ref<string[]>([]);
</script>

<template>
  <InputSelect v-model="value" :options="options" multiple placeholder="选择多个" />
</template>

自定义输入

在输入框中输入不在选项中的值，按 Enter 确认。通过 empty-text 自定义无匹配项时的提示。

<template>
  <InputSelect v-model="value" :options="options" empty-text="无匹配项，按 Enter 输入" />
</template>

禁用

设置 disabled 禁用组件。

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

导入

import { InputSelect } from "@reglow/reui";

Props

属性类型默认值说明
modelValueT | T[]-当前值（v-model）
options(string | { label, value })[][]选项列表
placeholderstring选择或输入...占位文字
emptyTextstring无匹配项，按 Enter 确认输入无匹配时提示
multiplebooleanfalse多选
disabledbooleanfalse禁用
classstring-附加类名

Events

事件说明回调参数
update:modelValue值变化(value: T | T[])

国际化

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

Input 输入框
Input 输入框
NativeSelect 原生选择器
基于原生 `<select>` 的样式化封装，搭配 `NativeSelectOption` / `NativeSelectOptGroup` 使用。