# HTSelect 选择器

# v-model 基本用法

默认是基础单选，可以通过 v-model 设置当前被选中的 HTOption 的 value

# placeholder 占位符

占位符，没有输入和选择时，显示的文字

# HTOption.disabled 选项禁用

将对应 HTOption 的 disabled 设置为 true，即可禁用该选项，令其无法选择

# HTSelect.disabled 选择器禁用

将 HTSelect 的 disabled 设置为 true，即可禁用整个选择器

# clearable 单选清空

注意：此属性仅适用于单选

为 HTSelect 设置 clearable 属性，即可清空选项

# multiple 多选

为 HTSelect 设置 multiple 即可启用多选

注意：现阶段必须搭配 collapse-tags 属性一起使用，否则样式会有异常

# slot 自定义模版

可以自定义选择项展示模版，通过 HTOption 的 slot 设置

# HTOptionGroup 分组

结合 HTOptionGroup 可以实现分组展示

# filterable 过滤搜索

设置 filterable 即可启用过滤搜索功能。

默认情况下，会通过选项的 label 属性对输入值进行包含搜索。

# allow-create 创建条目

使用此属性，可以在输入框中输入文字来创建新的条目，注意此时必须设置 filterable。

# default-first-option 默认选择过滤首项

必须结合 filterable 使用，过滤搜索时，按下回车即可选择搜索结果的第一项（如果没有这个属性，那么需要先通过方向键选中，然后回车选中）

和 allow-create 并不强制绑定，但是使用 allow-create 的时候搭配 default-first-option 会有很好的交互效果，推荐一起使用

# style-type 风格模式

目前支持以下模式：

  • 'no-border' 无边框
  • 'no-background' 无背景（hover 时也没有背景）

# change 选中值变化时触发

选择或者清空时触发，参数是变化后的选项值

# customClasses 自定义类名

通过 customClasses 自定义选择器类名，可以自定义样式

# API

# HTSelect

属性 描述 类型 默认值
v-model 选择项的值 String/Number -
placeholder 占位符 String '请选择'
disabled 是否禁用 Boolean false
clearable 是否清空 Boolean false
multiple 是否多选 Boolean false
solt 自定义模版 String/Element -
filterable 是否过滤搜索 Boolean false
allow-create 是否支持创建条目 Boolean false
default-first-option 是否支持选择过滤首项 Boolean false
style-type 支持的风格模式 'no-border' / 'no-backaground' -
change 选中值变化时触发的事件 (value) => void -
customClasses 自定义类名 String -

# HTOption

属性 描述 类型 默认值
label 选项展示文字 String -
value 选项值 String/Number -
disabled 是否禁用 Boolean false

# HTGroup

属性 描述 类型 默认值
label 分组的组名 String -
disabled 是否将该分组下所有选项设置为禁用 Boolean false

HTSkeleton 骨架屏