# Dropdown

<div data-full-width="false"><figure><img src="/files/ca5KzCKysZdvsnX1rMpS" alt="Dropdown 介紹示意圖"><figcaption></figcaption></figure></div>

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

### 主題色 <a href="#theme" id="theme"></a>

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

### 大小 <a href="#size" id="size"></a>

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

### 提示文字

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

### 禁用 <a href="#disabled" id="disabled"></a>

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

### 前綴與後綴 <a href="#preffix-affix" id="preffix-affix"></a>

```html
<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" <a href="#fixed" id="fixed"></a>

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

### 在 bp-form-item 裡面 <a href="#bp-form-item" id="bp-form-item"></a>

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

### 客製化列表寬度 <a href="#custom-width" id="custom-width"></a>

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

### Options 與 Methods <a href="#options-and-methods" id="options-and-methods"></a>

```javascript
//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);
}
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="153">Name</th><th width="154">Value</th><th width="130">Type</th><th width="92">Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td>String</td><td>random</td><td>false</td><td></td></tr><tr><td>size</td><td>small,<br>large</td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>v-model</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>options</td><td></td><td>Array&#x3C;{ label: string; type?: ‘link’ or ‘external-link’; url: string }></td><td></td><td>true</td><td></td></tr><tr><td>disabled</td><td></td><td>Boolean</td><td></td><td>false</td><td></td></tr><tr><td>placeholder</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>theme</td><td><p>primary,</p><p>success,</p><p>warning, </p><p>danger, </p><p>primary-ghost, </p><p>success-ghost, </p><p>warning-ghost, </p><p>danger-ghost</p></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>optionWidth</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>fixed</td><td></td><td>Boolean</td><td></td><td>false</td><td></td></tr><tr><td>v-slot:prefix</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>v-slot:affix</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>listboxClass</td><td></td><td>String</td><td></td><td>false</td><td>可以在 listbox 增加 classname</td></tr></tbody></table>

### Demo

{% embed url="<https://codesandbox.io/embed/piman-dropdown-guq47t?fontsize=14&module=/src/App.vue&theme=dark>" fullWidth="false" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bpio.gitbook.io/piman/vue2/dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.