# 下拉框 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;" disabled></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>

# 属性及事件

# HcSelect属性

属性 说明 类型 可选值 默认值
value 当前值,支持v-model方式使用 string -- --
placeholder 为空提示 string -- --
data 备选项数据 array -- --
multiple 允许多选 boolean -- false
viewable 是否查看状态 boolean -- false
clearable 单选时是否可以清空选项 boolean -- false
filterable 是否可搜索 boolean -- false

# HcSelect-data选项属性

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

# HcSelect事件

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