Fighting Design

Appearance

On this page

Select 选择器 ​

到了需要选择的时间了

基本使用 ​

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

开启

优先级 ​

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

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

开启

禁用状态 ​

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

开启

Select Attributes ​

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

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,
  OptionInstance,
  OptionProps
} from 'fighting-design'

SelectModelValue ​

ts
type SelectModelValue = string | number | boolean

SelectChange ​

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

Contributors ​