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 | 尺寸 | FightingSize | large middle small mini | middle |
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