Select 选择器

下拉选择器组件，基于 Floating UI 实现浮层定位（点击展开、自动翻转、面板内滚动）。

基础用法

Select

示例即将加载...

<template>
  <TuffSelect v-model="value" placeholder="请选择">
    <TuffSelectItem value="option1" label="选项 1" />
    <TuffSelectItem value="option2" label="选项 2" />
    <TuffSelectItem value="option3" label="选项 3" />
  </TuffSelect>
</template>

远程搜索（可编辑）

Select (remote searchable)

示例即将加载...

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

const value = ref('')
const remoteOptions = ref<Array<{ value: string; label: string }>>([])

async function onSearch(q: string) {
  // remote request
  // remoteOptions.value = await fetch(...)
}
</script>

<template>
  <TuffSelect v-model="value" remote editable @search="onSearch">
    <TuffSelectItem v-for="o in remoteOptions" :key="o.value" :value="o.value" :label="o.label" />
  </TuffSelect>
</template>

可搜索

Select (searchable)

示例即将加载...

<template>
  <TuffSelect v-model="value" placeholder="Searchable" searchable>
    <TuffSelectItem v-for="i in 30" :key="i" :value="`option${i}`" :label="`Option ${i}`" />
  </TuffSelect>
</template>

禁用状态

Select (disabled)

示例即将加载...

<template>
  <TuffSelect v-model="value" placeholder="禁用状态" disabled>
    <TuffSelectItem value="option1" label="选项 1" />
  </TuffSelect>
</template>

禁用选项

Select (disabled option)

示例即将加载...

<template>
  <TuffSelect v-model="value" placeholder="请选择">
    <TuffSelectItem value="option1" label="可选项 1" />
    <TuffSelectItem value="option2" label="禁用选项" disabled />
    <TuffSelectItem value="option3" label="可选项 2" />
  </TuffSelect>
</template>

滚动面板

示例即将加载...

<template>
  <TuffSelect v-model="value" :dropdown-max-height="220">
    <TuffSelectItem v-for="i in 30" :key="i" :value="`option${i}`" :label="`Option ${i}`" />
  </TuffSelect>
</template>

API

TuffSelect Props

属性名	说明	类型	默认值
modelValue / v-model	绑定值	`string \| number`	`''`
placeholder	占位文本	`string`	`'请选择'`
disabled	是否禁用	`boolean`	`false`
searchable	是否可搜索	`boolean`	`false`
searchPlaceholder	搜索框占位	`string`	`'Search'`
editable	是否可编辑（在触发器输入）	`boolean`	`false`
remote	是否远程搜索（输入时触发 `search`）	`boolean`	`false`
dropdownMaxHeight	下拉面板最大高度	`number`	`280`
dropdownOffset	触发器与面板间距	`number`	`6`

TuffSelect Events

事件名	说明	回调参数
change	选中值改变时触发	`(value: string \| number) => void`
update:modelValue	值更新时触发	`(value: string \| number) => void`
search	输入触发搜索（remote 模式）	`(query: string) => void`

TuffSelectItem Props

属性名	说明	类型	默认值
value	选项值	`string \| number`	-
label	选项标签	`string`	-
disabled	是否禁用	`boolean`	`false`