Select

介紹使用 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']"/>

預設 0.8 秒後啟動 autocomplete 過濾選項，若要手動搜尋：使用 "@search"

屬性

Name	Value	Type	Default	Required	Note
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

事件

Name	Paramaters	Description
search	keyword	搜尋輸入值改變時
input

Demo