DropdownMenu 下拉菜单

桌面风格的弹出菜单，支持点击触发和右键菜单。

基本用法

通过 ADropdownMenu 包裹触发元素，AMenuItem 定义菜单项。

<ADropdownMenu>
  <template #trigger>
    <ABtn>操作</ABtn>
  </template>
  <AMenuItem label="新建文件" />
  <AMenuItem label="打开文件" />
  <AMenuDivider />
  <AMenuItem label="保存" accelerator="⌘S" />
  <AMenuItem label="另存为" disabled />
</ADropdownMenu>

危险操作

设置 danger 标记危险操作项。

<ADropdownMenu>
  <template #trigger>
    <ABtn>更多</ABtn>
  </template>
  <AMenuItem label="编辑" />
  <AMenuDivider />
  <AMenuItem label="删除" danger />
</ADropdownMenu>

右键菜单

设置 trigger="contextmenu" 右键触发。

在此区域右键点击

<ADropdownMenu trigger="contextmenu">
  <template #trigger>
    <div>在此区域右键点击</div>
  </template>
  <AMenuItem label="复制" />
  <AMenuItem label="粘贴" />
  <AMenuDivider />
  <AMenuItem label="全选" />
</ADropdownMenu>

分组

使用 AMenuGroup 对菜单项进行分组。

<ADropdownMenu>
  <template #trigger>
    <ABtn>分组菜单</ABtn>
  </template>
  <AMenuGroup label="编辑">
    <AMenuItem label="撤销" />
    <AMenuItem label="重做" />
  </AMenuGroup>
  <AMenuDivider />
  <AMenuGroup label="视图">
    <AMenuItem label="缩放" />
    <AMenuItem label="全屏" />
  </AMenuGroup>
</ADropdownMenu>

API

DropdownMenu Props

名称	类型	默认值	说明
modelValue	boolean	false	是否显示
trigger	'click' | 'contextmenu' | 'hover'	'click'	触发方式
placement	'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'	'bottom-start'	弹出位置
disabled	boolean	false	是否禁用
autoClose	boolean	true	点击菜单项后自动关闭

DropdownMenu Events

名称	说明
update:modelValue	显示状态变化
open	打开时触发
close	关闭时触发

MenuItem Props

名称	类型	默认值	说明
label	string	—	菜单项文本
disabled	boolean	false	禁用
danger	boolean	false	危险操作模式
icon	string	—	图标类名（RemixIcon）
accelerator	string	—	快捷键提示文本

交互特性

• 点击外部自动关闭
• 选中菜单项自动关闭（autoClose）
• 禁用状态阻止交互
• 危险操作红色高亮
• 右键菜单定位到鼠标位置
• fade + translate 弹出动画