Dropdown

A dropdown menu component based on Tooltip, used to display options triggered by click or hover.

Basic Usage

<script setup>
import { ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = ref([
  { key: 1, label: 'Edit' },
  { key: 2, label: 'Copy' },
  { key: 3, label: 'Delete' }
])
</script>

<template>
  <Dropdown :menuOption="options" trigger="click">
    <template #default>
      <Button>Actions</Button>
    </template>
  </Dropdown>
</template>

Hover Trigger

<script setup>
import { ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = ref([
  { key: 1, label: 'Profile' },
  { key: 2, label: 'Settings' }
])
</script>

<template>
  <Dropdown :menuOption="options" trigger="hover">
    <template #default>
      <Button>Hover me</Button>
    </template>
  </Dropdown>
</template>

Disabled & Divided

<script setup>
import { ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = ref([
  { key: 1, label: 'Normal item' },
  { key: 2, label: 'Disabled item', disabled: true },
  { key: 3, label: 'With divider', divided: true }
])
</script>

<template>
  <Dropdown :menuOption="options">
    <template #default>
      <Button>Options</Button>
    </template>
  </Dropdown>
</template>

Manual Control

<script setup>
import { ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'

const dropdownRef = ref()
const options = ref([
    { key: 1, label: 'Option 1' },
    { key: 2, label: 'Option 2' }
])
</script>

<template>
    <Dropdown ref="dropdownRef" :menuOption="options" placement="top" manual>
        <template #default>
            <Button>Manual Control</Button>
        </template>
    </Dropdown>
    <div class="demo-manual">
        <Button type="success" @click="dropdownRef?.show()">Show</Button>
        <Button type="danger" @click="dropdownRef?.hide()">Hide</Button>
    </div>

</template>

<style scoped>
.demo-manual {
    display: flex;
    margin-top: 10px;
}
</style>

---

Dropdown Attributes

Name	Description	Type	Default
menuOption	options list to render	MenuOption[]	[]
trigger	how to trigger dropdown (click / hover)	string	'click'
placement	position of the dropdown	Placement (top-end, etc)	'bottom'
popperOptions	popper.js options	Partial<Options>	{}
openDelay	delay in ms before showing	number	0
closeDelay	delay in ms before hiding	number	200
manual	whether to manually control visibility	boolean	false
hideAfterClick	whether to hide after clicking an item	boolean	true

---

Dropdown Events

Name	Description	Type
select	emitted when an item is selected	(item: MenuOption) => void
visible-change	emitted when visibility changes	(visible: boolean) => void

---

Exposed Methods

You can use ref to access the dropdown instance and call these methods:

Method	Description
show()	show the dropdown
hide()	hide the dropdown

---

Type Definition

export interface MenuOption {
  key: string | number
  label: VNode | string
  disabled?: boolean
  divided?: boolean
}

export interface DropdownInstance {
  show: () => void
  hide: () => void
}