Honeycomb Design

# 下拉框 Select

当选项过多时，使用下拉菜单展示并选择内容。

# 基础用法

基础用法

适用广泛的基础单选

<title>基础用法</title>
<describe>适用广泛的基础单选</describe>
<template>
    <hc-select :data="data" :text.sync="text" v-model="value" style="width: 200px;" clearable></hc-select>
</template>
<script>
export default {
    data () {
      return {
        value: '',
        text: '',
        data: [
          { text: 'xx1', value: 'x1' },
          { text: 'xx2', value: 'x2' },
          { text: 'xx3', value: 'x3' },
          { text: 'xx4', value: 'x4' },
          { text: 'xx5', value: 'x5' }
        ],
      }
    }
}
</script>

# 下拉多选

下拉多选

适用性较广的基础多选，用 Tag 展示已选项

<title>下拉多选</title>
<describe>适用性较广的基础多选，用 Tag 展示已选项</describe>
<template>
    <hc-select :data="data" multiple v-model="values" style="width: 200px;"></hc-select>
</template>
<script>
export default {
    data () {
      return {
        values: [],
        data: [
          { text: 'xx1', value: 'x1' },
          { text: 'xx2', value: 'x2' },
          { text: 'xx3', value: 'x3' },
          { text: 'xx4', value: 'x4' },
          { text: 'xx5', value: 'x5' }
        ]
      }
    }
}
</script>

# 可搜索

可搜索

可以利用搜索功能快速查找选项

<title>可搜索</title>
<describe>可以利用搜索功能快速查找选项</describe>
<template>
    <hc-select :data="data" v-model="values" style="width: 200px;" :filterable="true"></hc-select>
</template>
<script>
export default {
    data () {
      return {
        values: [],
        data: [
          { text: 'a', value: 'x1' },
          { text: 'b', value: 'x2' },
          { text: 'c', value: 'x3' },
          { text: 'd', value: 'x4' },
          { text: 'e', value: 'x5' }
        ]
      }
    }
}
</script>

# 有禁用选项

禁用选项

可以禁用下拉框中的选项

<title>禁用选项</title>
<describe>可以禁用下拉框中的选项</describe>
<template>
    <hc-select :data="data" v-model="values" style="width: 200px;" :filterable="true"></hc-select>
</template>
<script>
export default {
    data () {
      return {
        values: [],
        data: [
          { text: 'a', value: 'x1' , disabled: true},
          { text: 'b', value: 'x2' },
          { text: 'c', value: 'x3' },
          { text: 'd', value: 'x4' },
          { text: 'e', value: 'x5' }
        ]
      }
    }
}
</script>

# 创建新条目

创建新条目

允许用户创建新条目

<title>创建新条目</title>
<describe>允许用户创建新条目</describe>
<template>
    <hc-select :data="data" v-model="values" style="width: 200px;" :allow-create="true"></hc-select>
</template>
<script>
export default {
    data () {
      return {
        values: [],
        data: [
          { text: 'a', value: 'x1' },
          { text: 'b', value: 'x2' },
          { text: 'c', value: 'x3' },
          { text: 'd', value: 'x4' },
          { text: 'e', value: 'x5' }
        ]
      }
    }
}
</script>

# 属性及事件

# HcSelect属性

属性 说明 类型 可选值 默认值
value 当前值，支持v-model方式使用 string -- --
placeholder 为空提示 string -- --
data 备选项数据 array -- --
multiple 允许多选 boolean -- false
viewable 是否查看状态 boolean -- false
disabled 是否禁用 boolean -- false
clearable 单选时是否可以清空选项 boolean -- false
filterable 是否可搜索 boolean -- false
collapse-tags 是否开启选项汇总，溢出时使用数字显示 boolean -- false
allow-create 是否创建并选中选项中不存在的条目 boolean -- false

# HcSelect-data选项属性

属性 说明 类型 可选值 默认值
value 当前选项值 string -- --
text 当前选项文本 string -- --
disabled 当前选项禁用 boolean -- --

# HcSelect事件

事件 说明 回调参数
change 用户选择值确认时触发 event.value：选中项的值
event.text：选中项的文本

← 下拉树 TreeSelect →