Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

移动到下拉菜单上，展开更多操作。

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

const menuOptions = [
  { label: '选项1', key: 'item-1' },
  { label: '选项2', key: 'item-2' },
  { label: '选项3', key: 'item-3' }
]

const handleSelect = (item) => {
  console.log('选中了:', item)
}
</script>
<template>
  <div style="display: flex; gap: 20px;">
    <Dropdown :menuOptions="menuOptions" @select="handleSelect">
      <Button>下拉菜单</Button>
    </Dropdown>
    
    <Dropdown :menuOptions="menuOptions" @select="handleSelect" placement="bottom-start">
      <Button>位置：bottom-start</Button>
    </Dropdown>
    
    <Dropdown :menuOptions="menuOptions" @select="handleSelect" placement="bottom-end">
      <Button>位置：bottom-end</Button>
    </Dropdown>
  </div>
</template>

触发方式

可以配置点击触发或者悬停触发。

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

const menuOptions = [
  { label: '选项1', key: 'item-1' },
  { label: '选项2', key: 'item-2' },
  { label: '选项3', key: 'item-3' }
]
</script>
<template>
  <div style="display: flex; gap: 20px;">
    <Dropdown :menuOptions="menuOptions" trigger="hover">
      <Button>悬停触发（默认）</Button>
    </Dropdown>
    
    <Dropdown :menuOptions="menuOptions" trigger="click">
      <Button>点击触发</Button>
    </Dropdown>
  </div>
</template>

禁用选项

通过在 menuOptions 中设置 disabled 属性来禁用某些选项。

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

const menuOptions = [
  { label: '选项1', key: 'item-1' },
  { label: '选项2', key: 'item-2', disabled: true },
  { label: '选项3', key: 'item-3' }
]
</script>
<template>
  <Dropdown :menuOptions="menuOptions">
    <Button>下拉菜单（禁用选项）</Button>
  </Dropdown>
</template>

分割线

通过在 menuOptions 中设置 divided 属性来添加分割线。

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

const menuOptions = [
  { label: '选项1', key: 'item-1' },
  { label: '选项2', key: 'item-2' },
  { label: '选项3', key: 'item-3', divided: true },
  { label: '选项4', key: 'item-4' }
]
</script>
<template>
  <Dropdown :menuOptions="menuOptions">
    <Button>下拉菜单（分割线）</Button>
  </Dropdown>
</template>

自定义选项内容

通过在 menuOptions 中使用 VNode 作为 label 属性值来自定义选项内容。

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

const menuOptions = [
  { 
    label: h('div', { style: 'display: flex; align-items: center;' }, [
      h(Icon, { icon: 'edit', style: 'margin-right: 8px;' }),
      '编辑'
    ]), 
    key: 'edit' 
  },
  { 
    label: h('div', { style: 'display: flex; align-items: center;' }, [
      h(Icon, { icon: 'copy', style: 'margin-right: 8px;' }),
      '复制'
    ]), 
    key: 'copy' 
  },
  { 
    label: h('div', { style: 'display: flex; align-items: center;' }, [
      h(Icon, { icon: 'trash-can', style: 'margin-right: 8px; color: #f56c6c;' }),
      h('span', { style: 'color: #f56c6c;' }, '删除')
    ]), 
    key: 'delete',
    divided: true
  }
]
</script>
<template>
  <Dropdown :menuOptions="menuOptions">
    <Button>自定义渲染</Button>
  </Dropdown>
</template>

Attributes

Dropdown Attributes

名称	说明	类型	默认值
menuOptions	下拉菜单选项	array<{ label: string | VNode, key: string | number, disabled?: boolean, divided?: boolean }>	[]
placement	菜单弹出位置	enum - 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'	bottom
trigger	触发下拉的行为	enum - 'hover' | 'click'	hover
hideAfterClick	点击菜单项后隐藏菜单	boolean	true
transition	过渡动画名称	string	fade
openDelay	展开延时，单位为毫秒	number	0
closeDelay	关闭延时，单位为毫秒	number	0
popperOptions	popper.js 的选项	object	—

Dropdown Events

名称	说明	类型
visible-change	下拉框出现/隐藏时触发	function(visible: boolean)
select	选中下拉选项时触发	function(item: { label: string | VNode, key: string | number, disabled?: boolean, divided?: boolean })

Dropdown Slots

名称	说明
default	触发下拉菜单显示的元素