Skip to content
On this page

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尺寸FightingSizelarge middle small minimiddle
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

组件导出以下类型定义:

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

SelectModelValue

ts
type SelectModelValue = string | number | boolean

SelectChange

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

SelectBeforeChange

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

Contributors