Dropdown 下拉菜单

向下弹出菜单，支持点击、悬停或右键触发，支持图标、分隔线、禁用项和危险项。

基础用法

点击按钮弹出菜单，支持图标、分隔线和危险项

vue

<template>
  <ADropdown :items="items">
    <button
      class="aui-btn aui-btn-md aui-btn-outline"
      style="display: inline-flex; align-items: center; gap: 6px"
    >
      操作
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </button>
  </ADropdown>
</template>

<script setup lang="ts">
import { h } from "vue";
import { ADropdown } from "@lite-code/aui-vue";

const EditIcon = () =>
  h(
    "svg",
    {
      viewBox: "0 0 24 24",
      width: 14,
      height: 14,
      fill: "none",
      stroke: "currentColor",
      "stroke-width": 2,
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("path", {
        d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",
      }),
      h("path", {
        d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",
      }),
    ]
  );

const items = [
  { key: "edit", label: "编辑", icon: EditIcon, onClick: () => alert("编辑") },
  { key: "copy", label: "复制", onClick: () => alert("复制") },
  { type: "divider" as const },
  { key: "delete", label: "删除", danger: true, onClick: () => alert("删除") },
];
</script>

Hover 触发

设置 trigger='hover'，鼠标悬停时打开，离开后延迟 150ms 关闭

vue

<template>
  <ADropdown trigger="hover" :items="items">
    <button
      class="aui-btn aui-btn-md aui-btn-secondary"
      style="display: inline-flex; align-items: center; gap: 6px"
    >
      悬停触发
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </button>
  </ADropdown>
</template>

<script setup lang="ts">
import { ADropdown } from "@lite-code/aui-vue";

const items = [
  { key: "profile", label: "个人资料" },
  { key: "settings", label: "账号设置" },
  { type: "divider" as const },
  { key: "logout", label: "退出登录", danger: true },
];
</script>

右键菜单

components

package.json

README.md

src

index.tsx

设置 trigger='contextMenu'，右键点击触发菜单，菜单出现在鼠标位置

vue

<template>
  <div
    style="
      width: 260px;
      background: var(--aui-bg, #fff);
      border: 1px solid var(--aui-border, #e2e2e3);
      border-radius: 8px;
      padding: 4px 0;
      user-select: none;
    "
  >
    <ADropdown
      v-for="f in files"
      :key="f.name"
      trigger="contextMenu"
      :items="menuItems"
      @select="(key) => (tip = `对 ${f.name} 执行: ${key}`)"
    >
      <div
        style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 5px 12px;
          font-size: 13px;
          cursor: default;
        "
      >
        <svg
          viewBox="0 0 24 24"
          width="16"
          height="16"
          :fill="f.isFolder ? '#f5a623' : '#5b8def'"
        >
          <path
            v-if="f.isFolder"
            d="M2 5a2 2 0 0 1 2-2h4l2 2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5z"
          />
          <path
            v-else
            d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"
          />
        </svg>
        {{ f.name }}
      </div>
    </ADropdown>
  </div>
  <div
    v-if="tip"
    style="margin-top: 10px; font-size: 13px; color: var(--aui-text-3, #8b8b8f)"
  >
    {{ tip }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ADropdown } from "@lite-code/aui-vue";

const tip = ref("");

const files = [
  { name: "components", isFolder: true },
  { name: "package.json", isFolder: false },
  { name: "README.md", isFolder: false },
  { name: "src", isFolder: true },
  { name: "index.tsx", isFolder: false },
];

const menuItems = [
  { key: "open", label: "打开" },
  { key: "rename", label: "重命名" },
  { type: "divider" as const },
  { key: "copy", label: "复制" },
  { key: "download", label: "下载" },
  { type: "divider" as const },
  { key: "delete", label: "删除", danger: true },
];
</script>

禁用

单个菜单项可通过 disabled 禁用；整体禁用通过 Dropdown 的 disabled prop 控制

vue

<template>
  <div style="display: flex; gap: 12px">
    <ADropdown :items="items">
      <button class="aui-btn aui-btn-md aui-btn-outline">含禁用项</button>
    </ADropdown>

    <ADropdown :items="items" :disabled="true">
      <button class="aui-btn aui-btn-md aui-btn-outline" disabled>
        整体禁用
      </button>
    </ADropdown>
  </div>
</template>

<script setup lang="ts">
import { ADropdown } from "@lite-code/aui-vue";

const items = [
  { key: "edit", label: "编辑" },
  { key: "export", label: "导出（已禁用）", disabled: true },
  { type: "divider" as const },
  { key: "delete", label: "删除", danger: true },
];
</script>

API

Dropdown Props

属性	类型	默认值	说明
items	DropdownItem[]	[]	菜单项列表
trigger	'click' | 'hover' | 'contextMenu'	'click'	触发方式
disabled	boolean	false	整体禁用
open	boolean	—	受控展开状态
defaultOpen	boolean	false	非受控默认展开状态
onOpenChange	(open: boolean) => void	—	展开/关闭回调
onSelect	(key: string | number) => void	—	选中菜单项回调（关闭前触发）

DropdownMenuItem

属性	类型	说明
key	string | number	唯一标识
label	string	显示文字
disabled	boolean	禁用该项
danger	boolean	危险项（红色）
onClick	() => void	点击回调

DropdownDivider

属性	类型	说明
type	'divider'	固定值，表示分隔线