@lateinos/awesome-ui

# ComboBox 组合框

是一个基础的组件，实现组合框组件的基础功能及统一组合框表单组件样式

# 引入

import { H3ComboBox } from '@lateinos/awesome-ui';

export default {
  components: {
    H3ComboBox,
    H3ComboOptions: H3ComboBox.Options,
  },
};

# 示例

# 基本用法

# 选项分组

# 结合H3Dropdown使用

# 单选

# 多选

# API

# Prop - H3ComboBox

参数 说明 类型 默认值
value 呈现值 array [{value, label}]
multiple 是否多选 boolean false
allowClear 是否允许清除 boolean false
showSuffix 是否显示后缀icon，多选默认隐藏，单选默认显示。若slot:suffix被使用了，该值会失效 boolean -
alias 数据key别名 object {value: 'value', label: 'label'}
placeholder placeholder string '请选择'
disabled 是否禁止 boolean false
maxTagCount 多选情况下，最多显示多少个选项，其他收起到一个省略标签里 number -
maxTagPlaceholder 省略标签显示文本 function(omittedValues) -
singleLine 是否单行显示 boolean true
focused 是否处于激活状态，showSearch="true"且focused="true"则搜索框在失焦后会自动获取焦点 boolean false
showSearch 是否启用搜索 boolean false

# Event - H3ComboBox

事件名称 说明 回调参数
change 选中值变化时触发 Function(selectAll)
search 搜索值 Function(keyword)
deselect 删除值变化时触发 Function(deselect, selectAll)

# Slot - H3ComboBox

插槽名 说明 SlotProps
defalut 选择框内自定义插槽 value 选中值 多选为item数组,单选为item
suffix 后缀图标插槽 -

# Prop - H3ComboOptions

参数 说明 类型 默认值
value 呈现值, 可通过disabled设置选项禁用 array [{value, label[, disabled]}]
data 数据项, 可通过disabled设置选项禁用, 配置项如下面所示 array []
group 数据项是不是分组, 若为true, data数据结构为[{groupName, items{value, label, extra[, disabled]}}] boolean false
multiple 是否多选 boolean false
highLightKey 高亮文本 string -
highLightColor 高亮文本颜色 string -
all 多选时是否有全选项 boolean true
alias 数据key别名 object {value: 'value', label: 'label', extra: 'extra'}
singleLine 是否单行显示 boolean true
checkable 是否显示选中标识 boolean true
limit 多选时限制数量 number -
  • data 配置项
[
  {
    value:string,
    label:string,
    extra?:string,
    disabled?:boolean
  }
  ...
]
// prop: group = true
[
  {
    groupName: string,
    items: {
      value:string,
      label:string,
      extra?:string,
      disabled?:boolean
    }
  }
  ...
]

# Event - H3ComboOptions

事件名称 说明 回调参数
reached 滚动到底触发 Function()
change 选中值变化时触发 Function(selectAll, {items, checked})
outLimit 多选且有limit时会触发 Function(limit)

# Slot - H3ComboOptions

插槽名 说明 SlotProps
icon H3ComboItem 图标插槽 -

# Prop - H3ComboItem

参数 说明 类型 默认值
value 呈现值, 可通过disabled设置选项禁用 object {value, label, extra}
multiple 是否多选 boolean false
highLightKey 高亮文本 string -
highLightColor 高亮文本颜色 string -
alias 数据key别名 object {value: 'value', label: 'label', extra: 'extra'}
singleLine 是否单行显示 boolean true
checkable 是否显示选中标识 boolean true
checked 是否选中 boolean false
disabled 是否显示选中标识 boolean false
indeterminate 多选下，是否是半选标识 boolean false

# Event - H3ComboItem

事件名称 说明 回调参数
change 选中值变化时触发 Function(value, checked)

# Slot - H3ComboItem

插槽名 说明 SlotProps
icon 图标插槽 -

← AreaSelect 地址控件 →