Dropdown 下拉菜单

将一组操作收纳到弹出菜单中，适合作为表格「列设置」等入口。

基础用法

<script setup lang="ts">
import {
  DanButton,
  DanDropdown,
  DanDropdownItem,
  DanDropdownMenu,
  DanMessage,
} from '@dandan-ui/ui'

function onCommand(command: string | number | object) {
  DanMessage.success(`选择了：${String(command)}`)
}
</script>

<template>
  <DanDropdown @command="onCommand">
    <DanButton type="primary">操作菜单</DanButton>
    <template #dropdown>
      <DanDropdownMenu>
        <DanDropdownItem command="edit">编辑</DanDropdownItem>
        <DanDropdownItem command="share">分享</DanDropdownItem>
        <DanDropdownItem command="delete" divided disabled>
          删除
        </DanDropdownItem>
      </DanDropdownMenu>
    </template>
  </DanDropdown>
</template>

Dropdown Props

属性	说明	类型	默认值
trigger	触发方式	'click' | 'hover'	'click'
placement	菜单位置	'top' | 'bottom' | 'left' | 'right'	'bottom'
disabled	是否禁用	boolean	false
hideOnClick	点击菜单项后是否关闭	boolean	true
showAfter / hideAfter	延时（ms，hover）	number	100
offset	间距	number	8

Dropdown Events

事件	说明
command	点击菜单项，参数为 command
visibleChange	显隐变化

DropdownItem Props

属性	说明	类型	默认值
command	指令值	string | number | object	''
disabled	禁用	boolean	false
divided	顶部分割线	boolean	false