> For the complete documentation index, see [llms.txt](https://bpio.gitbook.io/piman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bpio.gitbook.io/piman/vue2/dropdown.md).

# Dropdown

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

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2Fo7fsJRfbQnOYHMxLAvGv%2FDropdown.webp?alt=media&amp;token=f113e7b4-3cc5-4750-ab85-42a68543b3f9" 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.