Dropdown 下拉菜单

下拉菜单组件，用于展示一组可选择的选项。

基础用法

下拉菜单的基本用法，通过点击或悬停触发器来展开菜单。

基础用法

位置配置

悬停触发

<template>
  <div class="dropdown-demo">
    <h3>基础用法</h3>
    <div class="dropdown-group">
      <Dropdown v-model="isOpen1">
        <DropdownMenu>
          <DropdownMenuTrigger @click="handleClick1">
            <span>{{ data1 }} {{ isOpen1 }}</span>
            <Icon
              name="chevron-right"
              :size="16"
              class="dropdown-icon"
              :rotate="isOpen1 ? 90 : 0"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent style="padding: 8px">
            <DropdownMenuItem @click="change1(1)" class="dropdown-menu-item"
              >选项 1</DropdownMenuItem
            >
            <DropdownMenuItem @click="change1(2)" class="dropdown-menu-item"
              >选项 2</DropdownMenuItem
            >
            <DropdownMenuItem @click="change1(3)" class="dropdown-menu-item"
              >选项 3</DropdownMenuItem
            >
            <DropdownMenuItem disabled class="dropdown-menu-item"
              >禁用选项</DropdownMenuItem
            >
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>
    </div>

    <h3>位置配置</h3>
    <div class="dropdown-group">
      <Dropdown>
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button>顶部对齐</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem>选项 1</DropdownMenuItem>
            <DropdownMenuItem>选项 2</DropdownMenuItem>
            <DropdownMenuItem>选项 3</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>

      <Dropdown>
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button>居中对齐</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="center">
            <DropdownMenuItem>选项 1</DropdownMenuItem>
            <DropdownMenuItem>选项 2</DropdownMenuItem>
            <DropdownMenuItem>选项 3</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>

      <Dropdown>
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button>底部对齐</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>选项 1</DropdownMenuItem>
            <DropdownMenuItem>选项 2</DropdownMenuItem>
            <DropdownMenuItem>选项 3</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>
    </div>

    <h3>悬停触发</h3>
    <div class="dropdown-group">
      <Dropdown hoverable v-model="isOpen2">
        <DropdownMenu>
          <DropdownMenuTrigger
            @mouseenter="handleClick2"
            @mouseleave="handleClick2"
          >
            <Button outline
              >悬停展开

              <Icon
                name="chevron-right"
                :size="16"
                style="transition: transform 0.3s ease"
                :rotate="isOpen2 ? 90 : 0"
              />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>选项 1</DropdownMenuItem>
            <DropdownMenuItem>选项 2</DropdownMenuItem>
            <DropdownMenuItem>选项 3</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script setup>
import { Button } from '@/components';
import {
  Dropdown,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/Dropdown';
import { ref } from 'vue';

let isOpen1 = ref(false);
const handleClick1 = () => {
  console.log('点击展开');
  // isOpen1.value = !isOpen1.value;
};

let isOpen2 = ref(false);
const handleClick2 = () => {
  console.log('点击展开');
  isOpen2.value = !isOpen2.value;
};

const data1 = ref('选项 1');

const change1 = val => {
  data1.value = `选项 ${val}`;
  isOpen.value = false;
};
</script>

<style scoped>
.dropdown-demo {
  padding: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.dropdown-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}
.dropdown-menu-item {
  padding: 8px 8px;
}
</style>

在Breadcrumb中使用

下拉菜单可以与Breadcrumb组件结合使用，实现复杂的导航结构。

在Breadcrumb中使用

Home
1. /
2. /
Breadcrumb

自定义触发器

<template>
  <div class="dropdown-demo">
    <h3>在Breadcrumb中使用</h3>
    <div class="dropdown-group">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">Home</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <Dropdown>
              <DropdownMenu>
                <DropdownMenuTrigger
                  class="flex items-center gap-1"
                  @click="handleDropdownClick1"
                >
                  {{ currentComponent }}
                  <Icon
                    name="chevron-down"
                    size="16"
                    class="dropdown-icon"
                    :rotate="isOpen1 ? 180 : 0"
                  />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem
                    @click="handleBreadcrumbItemClick('Documentation')"
                    >Documentation</DropdownMenuItem
                  >
                  <DropdownMenuItem @click="handleBreadcrumbItemClick('Themes')"
                    >Themes</DropdownMenuItem
                  >
                  <DropdownMenuItem @click="handleBreadcrumbItemClick('GitHub')"
                    >GitHub</DropdownMenuItem
                  >
                </DropdownMenuContent>
              </DropdownMenu>
            </Dropdown>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>{{ currentPage }}</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>

    <h3>自定义触发器</h3>
    <div class="dropdown-group">
      <Dropdown>
        <DropdownMenu>
          <DropdownMenuTrigger
            class="flex items-center gap-1 p-2 bg-gray-100 rounded-md hover:bg-gray-200 cursor-pointer"
            @click="handleDropdownClick2"
          >
            <Icon name="User" size="20" />
            <span>{{ userMenuText }}</span>
            <Icon
              name="chevron-down"
              size="16"
              class="dropdown-icon"
              :rotate="isOpen2 ? 180 : 0"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem @click="handleUserMenuClick('个人资料')"
              >个人资料</DropdownMenuItem
            >
            <DropdownMenuItem @click="handleUserMenuClick('设置')"
              >设置</DropdownMenuItem
            >
            <DropdownMenuItem @click="handleUserMenuClick('退出登录')"
              >退出登录</DropdownMenuItem
            >
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script setup>
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from '@/components/Breadcrumb';
import {
  Dropdown,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/Dropdown';
import { Icon } from '@/components/Icon';
import { ref } from 'vue';

// 状态管理
const isOpen1 = ref(false);
const isOpen2 = ref(false);
const currentPage = ref('Breadcrumb');
const userMenuText = ref('用户菜单');
const currentComponent = ref('Components');

// 下拉菜单展开/收起处理函数
const handleDropdownClick1 = () => {
  isOpen1.value = !isOpen1.value;
};

const handleDropdownClick2 = () => {
  isOpen2.value = !isOpen2.value;
};

// 面包crumb下拉菜单点击事件
const handleBreadcrumbItemClick = item => {
  currentComponent.value = item;
  currentPage.value = item;
  isOpen1.value = false;
};

// 用户菜单点击事件
const handleUserMenuClick = item => {
  userMenuText.value = item;
  isOpen2.value = false;
};
</script>

<style scoped>
.dropdown-demo {
  padding: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.dropdown-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.breadcrumb-dropdown-example {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.custom-trigger-example {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}
</style>

高级下拉菜单

支持菜单标题、分组、键盘快捷键和多级子菜单的完整下拉菜单。

高级下拉菜单

<template>
  <div class="dropdown-demo">
    <h3>高级下拉菜单</h3>
    <div class="dropdown-group">
      <Dropdown>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button variant="outline"> Open </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuGroup>
              <DropdownMenuItem>
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
              </DropdownMenuItem>
              <DropdownMenuItem>
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
              </DropdownMenuItem>
              <DropdownMenuItem>
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
              </DropdownMenuItem>
              <DropdownMenuItem>
                Keyboard shortcuts
                <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>Team</DropdownMenuItem>
              <!-- <DropdownMenuSub> -->
              <Popover placement="right" :offset="20" :arrow="false">
                <Button
                  text
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                  >Invite users
                  <Icon name="chevron-right"></Icon>
                </Button>
                <template #content>
                  <div>
                    <DropdownMenuItem>Email</DropdownMenuItem>
                    <DropdownMenuItem>Message</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>More...</DropdownMenuItem>
                  </div>
                </template>
              </Popover>
              <!-- <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuSubContent>
                    <DropdownMenuItem>Email</DropdownMenuItem>
                    <DropdownMenuItem>Message</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>More...</DropdownMenuItem>
                  </DropdownMenuSubContent>
                </DropdownMenuPortal> -->
              <!-- </DropdownMenuSub> -->
              <DropdownMenuItem>
                New Team
                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>GitHub</DropdownMenuItem>
            <DropdownMenuItem>Support</DropdownMenuItem>
            <DropdownMenuItem disabled> API </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              Log out
              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button } from '@/components/Button';
import {
  Dropdown,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuGroup,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from '@/components/Dropdown';

const showStatusBar = ref(true);
const showActivityBar = ref(false);
const showPanel = ref(false);
const position = ref('bottom');
</script>

<style scoped>
.dropdown-demo {
  padding: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.dropdown-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
</style>

属性

Dropdown

参数	说明	类型	可选值	默认值
hoverable	是否支持悬停触发	boolean	true/false	false

DropdownMenuTrigger

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuContent

参数	说明	类型	可选值	默认值
align	对齐方式	string	start/center/end	center
position	位置	string	top/bottom	bottom
class	自定义类名	string	-	-

DropdownMenuItem

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	true/false	false
class	自定义类名	string	-	-

DropdownMenuLabel

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuGroup

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuSeparator

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuShortcut

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuSub

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuSubTrigger

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuSubContent

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

DropdownMenuPortal

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

事件

DropdownMenuItem

事件名称	说明	回调参数
click	点击菜单项时触发	(event: MouseEvent)