Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中，支持 hover、click、contextmenu 三种触发方式。

基础用法

将需要展开的内容放在 #dropdown 插槽中。

<template>
  <ZcDropdown @command="handleCommand">
    <ZcButton>下拉菜单</ZcButton>
    <template #dropdown>
      <ZcDropdownMenu>
        <ZcDropdownItem command="a">选项一</ZcDropdownItem>
        <ZcDropdownItem command="b">选项二</ZcDropdownItem>
        <ZcDropdownItem command="c" disabled>选项三（禁用）</ZcDropdownItem>
        <ZcDropdownItem command="d" divided>选项四</ZcDropdownItem>
      </ZcDropdownMenu>
    </template>
  </ZcDropdown>
</template>

<script setup>
function handleCommand(cmd) {
  console.log('选中:', cmd)
}
</script>

点击触发

设置 trigger="click" 使用点击触发。

<template>
  <ZcDropdown trigger="click">
    <ZcButton>点击展开</ZcButton>
    <template #dropdown>
      <ZcDropdownMenu>
        <ZcDropdownItem command="edit">编辑</ZcDropdownItem>
        <ZcDropdownItem command="copy">复制</ZcDropdownItem>
        <ZcDropdownItem command="delete" divided>删除</ZcDropdownItem>
      </ZcDropdownMenu>
    </template>
  </ZcDropdown>
</template>

触发方式

通过 trigger 属性设置触发方式：hover（悬浮）、click（点击）、contextmenu（右键菜单）。

<template>
  <ZcDropdown trigger="contextmenu">
    <ZcButton>右键触发</ZcButton>
    <template #dropdown>
      <ZcDropdownMenu>
        <ZcDropdownItem command="refresh">刷新</ZcDropdownItem>
        <ZcDropdownItem command="setting">设置</ZcDropdownItem>
      </ZcDropdownMenu>
    </template>
  </ZcDropdown>
</template>

Dropdown API

Props

参数	说明	类型	默认值
trigger	触发方式	'hover' | 'click' | 'contextmenu'	'hover'
visible (v-model)	可见性	boolean	false
placement	弹出位置	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'	'bottom'
disabled	是否禁用	boolean	false
showTimeout	显示延迟（ms）	number	250
hideTimeout	隐藏延迟（ms）	number	150
popperClass	弹出层自定义类名	string	''
hideOnClick	点击外部是否关闭	boolean	true
maxHeight	菜单最大高度	string	''

Events

事件名	说明	回调参数
update:visible	可见性变化	(val: boolean)
show	显示时	—
hide	隐藏时	—
command	菜单项选中	(command: string | number | object)
click	点击触发器	(event: MouseEvent)

DropdownItem Props

参数	说明	类型	默认值
command	命令值	string | number | object	''
disabled	是否禁用	boolean	false
divided	是否显示分隔线	boolean	false
icon	图标类名	string	''

DropdownItem Slots

插槽名	说明
icon	图标内容
default	文本内容