Select
介紹使用 Select 下拉選項元件

Select 下拉選擇,用在讓使用者針對選取的資料做進一步的篩選,或是與選項按鈕一樣,選一個特定值。點擊按鈕會出現一個懸浮區域,裡面是一系列的選項,外觀與 Dropdown 相似,但與 Dropdown 最大的不同之處在於 Select 點擊選項後,值變成選項內容,並且關閉懸浮區域。
主題色
<bpa-select v-model="value" :options="options" theme="primary" />
大小
<bpa-select v-model="value" :options="options" size="small" />
提示文字
<bpa-select v-model="value" :options="options" placeholder="placeholder"/>
禁用
<bpa-select v-model="value" :options="options" disabled/>
隱藏清除按鈕
<bpa-select v-model="value" :options="options" disabledClear/>
前綴與後綴
<bpa-select v-model="value" :options="options">
<template v-slot:prefix>prefix</template>
<template v-slot:affix>affix</template>
</bpa-select>
如果外層有 position: fixed
為了不讓外層的 position 狀態影響下拉式選單彈出的位置,需要加上 fixed 修正。
<bpa-select v-model="value" :options="options" fixed @click="onClick"/>
在 bpa-form-item 裡
在表單項目 bpa-form-item 裡面使用時,需要一起做搭配。
<bpa-form-item labelFor="bpa-select-{id}-btn">
<bpa-select v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>
客製化下拉式選單彈出框的寬度
<bpa-select v-model="value" :options="options" optionWidth="100px" @click="onClick"/>
可多選模式
<!-- show all options -->
<bpa-select v-model="value" :options="options" multiple />
<!-- show first option, others using "n+" -->
<bpa-select v-model="value" :options="options" multiple="accordion" />
選項群組
{
label: '第一群',
type: 'group',
options: [
{ label: 'label10', value: '10' },
{ label: 'label20', value: '20' },
{ label: 'label30', value: '30' }
]
}
}
搜尋下拉式選單裡的選項
<bpa-select v-model="value" :options="options" multiple :toolbar="['search']"/>
屬性
id
String
random
size
small, large
String
v-model
String
options
Array<{ label: string, value: any }> | Array<{ label: string, type: 'group', options: Option[] >
disabled
Boolean
false
disabledClear
Boolean
false
隱藏清除按鈕
placeholder
String
請選擇/select
theme
primary,
success,
warning,
danger,
primary-ghost,
success-ghost,
warning-ghost,
danger-ghost
String
optionWidth
String
fixed
Boolean
false
v-slot:prefix
提示文字的前方客製化區域
v-slot:affix
提示文字的前方客製化區域
toolbar
Array<'search'>
工具列,目前支援 搜尋 search 功能
multiple
'accordion' or undefined
多選,無需給值,若欲摺疊選項則給值 accordion
listboxClass
String
可以在 listbox 增加 classname
事件
search
keyword
搜尋輸入值改變時
input
Demo
Last updated
Was this helpful?