Select 选择器

选择器（Select）用于让用户从一组预设选项中选择值，支持单选、多选、禁用项和输入组模式。

基础用法

通过 v-model 实现双向绑定。options 属性支持传入对象数组 { value, label } 或纯字符串/数字数组。

<TSelect :options="fruitOptions" placeholder="请选择水果"/>
<TSelect :options="cityOptions" placeholder="请选择城市"/>

尺寸

通过 size 属性控制选择器尺寸：'lg'（大）、默认（中）、'sm'（小）。

<TSelect size="lg" :options="fruitOptions" placeholder="大尺寸"/>
<TSelect :options="fruitOptions" placeholder="默认尺寸"/>
<TSelect size="sm" :options="fruitOptions" placeholder="小尺寸"/>

状态

支持禁用和验证状态。配合 .valid-feedback / .invalid-feedback 显示验证提示。

<TSelect disabled :options="fruitOptions" placeholder="禁用"/>
<TSelect validation="valid" :options="fruitOptions" placeholder="验证通过"/>
<div class="valid-feedback">选择正确！</div>

<TSelect validation="invalid" :options="fruitOptions" placeholder="验证失败"/>
<div class="invalid-feedback">请选择一个选项。</div>

选项禁用

选项对象中的 disabled 字段可禁用特定选项。

<TSelect :options="[
  { value: 'opt1', label: '选项一' },
  { value: 'opt2', label: '选项二' },
  { value: 'opt3', label: '选项三（禁用）', disabled: true },
  { value: 'opt4', label: '选项四' },
]" placeholder="请选择" />

多选

设置 multiple 属性启用多选模式，v-model 绑定值为数组。

<TSelect multiple :options="cityOptions" />

输入组

通过 prepend-text / append-text 添加文本前缀/后缀，或使用 #prepend / #append 插槽嵌入自定义内容。

<TSelect prepend-text="协议" :options="['HTTP', 'HTTPS', 'FTP']"/>
<TSelect append-text="元" :options="['100', '200', '500']"/>
<TSelect placeholder="选择操作">
  <template #prepend>
    <span class="input-group-text">操作</span>
  </template>
  <option value="view">查看</option>
  <option value="edit">编辑</option>
</TSelect>

自定义选项

当 options 属性和 default 插槽都不提供时，选择器将不显示任何选项。你可以通过 default 插槽传入原生 <option> 元素以实现更灵活的自定义。

双向绑定

v-model 支持 string、number 和 string[]（多选时）类型。

<script setup lang="ts">
  import { ref } from 'vue'
  const value = ref('')
</script>
<template>
  <p>当前值：{{ value }}</p>
  <TSelect v-model="value" :options="cityOptions" placeholder="请选择城市" />
</template>

API

TSelect 属性 (Props)

属性名	说明	类型	默认值
options	选项数组（对象或字符串/数字）	(SelectOption | string | number)[]	undefined
placeholder	占位符文本	string	undefined
size	尺寸	'sm' | 'lg'	undefined
disabled	禁用状态	boolean	false
multiple	多选模式	boolean	false
validation	验证状态	'valid' | 'invalid'	undefined
block	块级宽度（w-100）	boolean	false
name	原生 name 属性	string	undefined
id	原生 id 属性	string	undefined
required	是否必填	boolean	false
prepend-text	前置文本	string	undefined
append-text	后置文本	string	undefined

TSelect 选项类型 (SelectOption)

interface SelectOption {
  value: string | number
  label: string
  disabled?: boolean
}

TSelect 事件 (Emits)

事件名	说明	回调参数
update:modelValue	选中值变化时触发	(value: string | number | string[]) => void

TSelect 插槽 (Slots)

插槽名	说明
default	自定义选项内容（原生 <option> / <optgroup>）
prepend	前置内容（替代 prepend-text），出现在 <select> 之前
append	后置内容（替代 append-text），出现在 <select> 之后