Select 选择器

到了需要选择的时间了

基本使用

使用 v-model 绑定一个值，f-option 组件定义每一个选项内容

开启

优先级

label 的展示方式分为两种：label 属性和插槽，都可以实现，但有些时候这些属性可能都存在或者都不存在，所以 label 的优先级为：slot > label > value，也就是说，如果 slot 和 label 都不存在的时候，默认展示 value

value 也有着上面的情况，优先级关系为 value > label > slot

开启

禁用状态

disabled 属性可以禁用整个选择器，也可以禁用指定选项

开启

在改变之前调用

on-before-change 可以在选择前改变之前调用，它需要返回一个 Promise，Promise 需要返回一个布尔值，返回 true 将需要改变，返回 false 则终止改变

开启

过滤和筛选

开启 filter 后，选择器则按输入值过滤选项。

开启

如果你需要携带一些参数传递，可以参考下面代码实现方式：

开启

Select Attributes

参数	说明	类型	可选值	默认值
`v-model:modelValue`	绑定值	SelectModelValue	——	——
`width`	自定义宽度	string / number	——	190
`name`	原生 name 属性	string	——	——
`placeholder`	占位符	string	——	——
`clear`	是否可清除	boolean	——	false
`disabled`	是否禁用	boolean	——	false
`filter`	是否可过滤	boolean	——	false
`size`	尺寸	FightingSize	`large` `middle` `small` `mini`	middle
`on-change`	绑定值发生改变时触发的回调	SelectChange	——	——
`on-before-change`	绑定值发生改变时之前触发的回调	SelectBeforeChange	——	——

Select Slots

名称	说明
`default`	默认插入的选项内容

Option Attributes

参数	说明	类型	可选值	默认值
`value`	选项的值	string / number	——	——
`label`	选项的标签，若不设置则默认与 value 相同	string / number	——	——
`disabled`	是否禁用	boolean	——	false

Option Slots

名称	说明
`default`	默认插入的标签内容

Interface

组件导出以下类型定义：

import type {
  SelectInstance,
  SelectProps,
  SelectModelValue,
  SelectChange,
  SelectBeforeChange,
  OptionInstance,
  OptionProps
} from 'fighting-design'

SelectModelValue

type SelectModelValue = string | number | boolean

SelectChange

type SelectChange = (
  newValue: SelectModelValue,
  newLabel: SelectModelValue,
  evt: MouseEvent
) => void

SelectBeforeChange

type SelectBeforeChange = (
  value: SelectModelValue,
  label: SelectModelValue
) => Promise<boolean>

Select 选择器 ​

基本使用 ​

优先级 ​

禁用状态 ​

在改变之前调用 ​

过滤和筛选 ​

Select Attributes ​

Select Slots ​

Option Attributes ​

Option Slots ​

Interface ​

SelectModelValue ​

SelectChange ​

SelectBeforeChange ​

Contributors ​