Skip to content

FaSelect 选择器

下拉选择器组件,支持单选、多选、分组和下拉内容定位方式。

使用场景

  • 表单下拉选择
  • 筛选条件选择
  • 城市/地区选择
  • 分类/标签选择
  • 单选/多选配置项

Props

属性类型默认值说明
multiplebooleanfalse是否多选
disabledbooleanfalse是否禁用
position'popper' | 'item-aligned''popper'下拉内容的定位模式
options(Option | GroupOption)[]必需选项数据
placeholderstring-占位提示文本
classHTMLAttributes['class']-自定义 CSS 类

Option 接口

ts
interface Option {
  label: string
  value: AcceptableValue
  disabled?: boolean
}

GroupOption 接口(分组选项)

ts
interface GroupOption {
  label: string
  options: Option[]
}

Events

事件名说明回调参数
change选项变化时触发value: AcceptableValue | undefined

注意事项

  1. v-model 绑定:使用 v-model 实现双向数据绑定
  2. 选项数据结构options 支持普通选项和分组选项两种格式
  3. 值类型value 可以是字符串、数字等类型
  4. 分组显示:当 options 中包含 options 属性时,会自动识别为分组选项
  5. z-index:下拉菜单的 z-index 默认为 2000,确保在其他内容上方显示
  6. 定位模式position="popper" 时下拉内容跟随触发器定位,position="item-aligned" 时会更接近原生 Select 的对齐方式