Dropdown

介紹使用 Dropdown 下拉式選單元件

Dropdown 下拉式選單，用在讓使用者針對選取的資料採取下一步互動。點擊按鈕會出現一個懸浮區域，裡面是一系列的選項，外觀與 Select 相似，但與 Select 最大的不同之處在於 Dropdown 點擊選項後觸發選項事件，並且關閉懸浮區域。

主題色

<bpa-dropdown v-model="value" :options="options" theme="primary" @click="onClick"/>

大小

<bpa-dropdown v-model="value" :options="options" size="small" @click="onClick"/>

提示文字

<bpa-dropdown v-model="value" :options="options" placeholder="自訂文字" @click="onClick"/>

禁用

<bpa-dropdown v-model="value" :options="options" theme="primary" disabled @click="onClick"/>

前綴與後綴

<bpa-dropdown v-model="value" :options="options" @click="onClick">
  <template v-slot:prefix>Prefix</template>
  <template v-slot:affix>Affix</template>
</bpa-dropdown>

如果上層有"position: fixed"

<bpa-dropdown v-model="value" :options="options" fixed @click="onClick"/>

在 bp-form-item 裡面

<bpa-form-item labelFor="bpa-dropdown-{id}-btn">
	<bpa-dropdown v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>

客製化列表寬度

<bpa-dropdown v-model="value" :options="options" optionWidth="100px" @click="onClick"/>

Options 與 Methods

//data
options: [
  { 
    type: 'link',
    url: '/',
    label: 'Internal Link',
  },
  { 
    type: 'external-link',
    url: 'https://google.com',
    label: 'External Link',
  },
  { 
    label: 'Text',
  }
]

//methods
onClick(item: any){
  console.log(item);
}

屬性

Name	Value	Type	Default	Required	Note
id		String	random
size	small, large	String
v-model		String
options		Array<{ label: string; type?: ‘link’ or ‘external-link’; url: string }>
disabled		Boolean
placeholder		String
theme	primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost	String
optionWidth		String
fixed		Boolean
v-slot:prefix
v-slot:affix
listboxClass		String			可以在 listbox 增加 classname

Demo