BeSelect 选择框组件文档 BeerUi-官方文档

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）