Vue Dropdown 是一款自定義下拉列表的組件。它可以輕松實現下拉列表，減少了開發者的工作量。Dropdown 組件提供了豐富的事件，您可以在相應的事件中執行自己的邏輯。

下面介紹一些 Dropdown 組件常用的事件，及其使用場景。

<template>
<div class="dropdown">
<div class="dropdown-toggle" @click="toggle">
點我展開下拉列表
</div>
<div class="dropdown-menu" :class="{show: show}" @click="selectItem">
<div class="dropdown-item" v-for="(item, index) in itemList" :key="index">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
itemList: ['選項1', '選項2', '選項3']
};
},
methods: {
toggle() {
this.show = !this.show;
},
selectItem(event) {
console.log(event.target.innerHTML);
this.show = false;
}
}
};
</script>

toggle() 方法，用于控制下拉列表的展開和收起。在點擊 dropdown-toggle 元素時觸發。

selectItem() 方法，用于選中下拉列表中的選項，取出選中的選項并關閉下拉列表。使用時需要將點擊事件傳遞給 selectItem 方法。

通過使用這兩個事件和組件配合使用，可以方便地實現下拉列表功能，提升用戶體驗，減少開發時間。