- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## BeSelect 选择框

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

### 基本用法

value：""

- 测试0
- 测试1
- 测试2
- 测试3
- 测试4
- 测试5
- 测试6
- 测试7
- 测试8
- 测试9
- 测试10
- 测试11
- 测试12
- 测试13
- 测试14
- 测试15
- 测试16
- 测试17
- 测试18
- 测试19

    let value = '选项1'
    const changeSelect = ({ detail }) => console.log(detail);

    <BeSelect bind:value clearable on:change={changeSelect} maxHeight='180px'>
    	{#each Array(20) as item, index}
    		<BeOption label="测试{index+1}" value="选项{index+1}"/>
    	{/each}
    </BeSelect>

显示代码

### 有禁用选项

在`options`数组中设定`disabled`值为 true，即可禁用该选项

value2:undefined

- 测试
- 测试2
- 测试3

    <BeSelect bind:value={value2} clearable={true}>
    	<BeOption label="测试" value="1" disabled={true} />
    	<BeOption label="测试2" value="2"/>
    	<BeOption label="测试3" value="3"/>
    </BeSelect>

显示代码

### 禁用状态

选择器不可用状态

- 测试
- 测试2
- 测试3

    <BeSelect bind:value={value3} disabled size="mini">
    	<BeOption label="测试" value="1" disabled={true} />
    	<BeOption label="测试2" value="2"/>
    	<BeOption label="测试3" value="3"/>
    </BeSelect>

显示代码

### 多选

适用性较广的基础多选

value4：["1"]

- 测试
- 测试2
- 测试3

value5：[]

- 测试
- 测试2
- 测试3

设置multiple属性即可启用多选，此时value的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapseTags属性将它们合并为一段文字。

    let value4 = 2
    <BeButton on:click={() => value4 = [2, '3']}>value4 = ['2', '3']</BeButton>
    <BeButton on:click={() => value4 = []}>clearValue</BeButton>
    <BeSelect bind:value={value4} multiple>
    	<BeOption label="测试" value="1"/>
    	<BeOption label="测试2" value="2"/>
    	<BeOption label="测试3" value="3"/>
    </BeSelect>
    <BeSelect bind:value={value5} multiple collapseTags>
    	<BeOption label="测试" value="1"/>
    	<BeOption label="测试2" value="2"/>
    	<BeOption label="测试3" value="3"/>
    </BeSelect>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value | 绑定值 | boolean / string / number / [string | number] | — | —
multiple | 是否多选 | boolean | — | false
disabled | 是否禁用 | boolean | — | false
value-key(TODO) | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value
size | 输入框尺寸 | string | medium/small/mini | —
clearable | 是否可以清空选项 | boolean | — | false
collapseTags | 多选时是否将选中值按文字的形式展示 | boolean | — | false
multipleLimit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0
name | select input 的 name 属性 | string | — | —
autocomplete | select input 的 autocomplete 属性 | string | — | off
placeholder | 占位符 | string | — | 请选择
filterable(TODO) | 是否可搜索 | boolean | — | false
allow-create(TODO) | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false
filter-method(TODO) | 自定义搜索方法 | function | — | —
remote(TODO) | 是否为远程搜索 | boolean | — | false
remote-method(TODO) | 远程搜索方法 | function | — | —
loading(TODO) | 是否正在从远程获取数据 | boolean | — | false
loading-text(TODO) | 远程加载时显示的文字 | string | — | 加载中
no-match-text(TODO) | 搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无匹配数据
no-data-text(TODO) | 选项为空时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无数据
reserve-keyword(TODO) | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 选中值发生变化时触发 | 目前的选中值
visibleChange | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false
removeTag | 多选模式下移除tag时触发 | 移除的tag值
clear | 可清空的单选模式下用户点击清空按钮时触发 | —
blur | 当 input 失去焦点时触发 | (event: Event)
focus | 当 input 获得焦点时触发 | (event: Event)

### Slot

name | 说明
--- | ---
suffix | Select 组件尾部内容

### BeOption

name | 说明
--- | ---
label | 展示内容
value | 选项卡的值
disabled | 禁用 默认false
slot | 新增插槽（v1.1.16）