使用场景
为 Dropdown 提供菜单结构、键盘导航和焦点管理。
组合菜单、图标与公开方法
显式菜单容器与项目共同运行，支持鼠标和键盘选择。
组合菜单、图标与公开方法
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="actions">
<AsamDropdown ref="menu" v-bind="{ trigger: 'click', wrapMenu: false }" @command="select">
<AsamButton type="default" native-type="button">打开操作菜单</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem command="edit" :icon="Edit">编辑</AsamDropdownItem>
<AsamDropdownItem command="archive" divided>归档</AsamDropdownItem>
<AsamDropdownItem command="remove" disabled>删除（不可用）</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamButton type="default" native-type="button" @click="menu?.open()"
>通过方法打开</AsamButton
>
<AsamButton type="default" native-type="button" @click="menu?.close()"
>通过方法关闭</AsamButton
>
</div>
<p class="example-paragraph" role="status">当前命令：{{ command }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDropdownMenuBasicDemo' });
import { ref, shallowRef } from 'vue';
import { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';
import type { AsamDropdownExpose } from '@asam-ui/ui';
import { Edit } from '@asam-ui/icons-vue';
const menu = shallowRef<AsamDropdownExpose>();
const command = ref('未选择');
const select = (value: string | number | object) => {
command.value = String(value);
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="actions">
<AsamDropdown ref="menu" v-bind="{ trigger: 'click', wrapMenu: false }" @command="select">
<AsamButton type="default" native-type="button">打开操作菜单</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem command="edit" :icon="Edit">编辑</AsamDropdownItem>
<AsamDropdownItem command="archive" divided>归档</AsamDropdownItem>
<AsamDropdownItem command="remove" disabled>删除（不可用）</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamButton type="default" native-type="button" @click="menu?.open()"
>通过方法打开</AsamButton
>
<AsamButton type="default" native-type="button" @click="menu?.close()"
>通过方法关闭</AsamButton
>
</div>
<p class="example-paragraph" role="status">当前命令：{{ command }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamDropdownMenuBasicDemo' });
import { ref, shallowRef } from 'vue';
import { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';
import { Edit } from '@asam-ui/icons-vue';
const menu = shallowRef();
const command = ref('未选择');
const select = (value) => {
command.value = String(value);
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
必须放在 AsamDropdown 的 dropdown 插槽中，并关闭父级 wrapMenu。default 插槽放菜单项；onKeydown 可接收键盘事件。公开 handleFocus/handleKeydown 等方法以 API 为准。菜单没有独立控件密度 prop，尺寸由父级提供。
组合职责与生命周期
消费父 AsamDropdown 的菜单上下文并容纳 AsamDropdownItem。显式菜单组合需将父级 wrapMenu 设为 false。default 提供菜单项；密度、循环键盘、触发和关闭由父级统一配置，菜单不另设业务命令或 size。
API
属性 AsamDropdownMenuProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
onKeydown | — | ((event: KeyboardEvent) => void) | undefined | undefined |
事件 AsamDropdownMenuEmits
插槽 AsamDropdownMenuSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
实例方法与状态 AsamDropdownMenuExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
role | — | enum"group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree"完整类型："group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined | — |
size | — | string | undefined | — |
rovingFocusGroupRootStyle | — | (AsamDropdownMenuExpose)["rovingFocusGroupRootStyle"] | — |
dropdownKls | — | string[] | — |
triggerId | — | string | — |
dropdownListWrapperRef | — | (AsamDropdownMenuExpose)["dropdownListWrapperRef"] | — |
handleKeydown | — | (event: KeyboardEvent) => void | — |
handleFocus | — | (e: FocusEvent) => void | — |
关联组件
参数与事件补充说明
固定 2.14.7 公开参数；运行时默认值来自已安装组件。
参数与事件说明
onKeydown
必填：否；声明来源：ASAM 声明。
onKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: KeyboardEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）AsamDropdownMenuProps 公开类型视图
ts
import type { AsamDropdownMenuProps } from '@asam-ui/ui';
// AsamDropdownMenuProps
type PublicContract = {
"onKeydown"?: ((event: KeyboardEvent) => void) | undefined;
};AsamDropdownMenuEmits 公开类型视图
ts
import type { AsamDropdownMenuEmits } from '@asam-ui/ui';
// AsamDropdownMenuEmits
type PublicContract = {
[key: string]: never;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamDropdownMenuSlots 公开类型视图
ts
import type { AsamDropdownMenuSlots } from '@asam-ui/ui';
// AsamDropdownMenuSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
};参数与事件说明
role
必填：是；声明来源：上游声明。
role 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："group" / "dialog" / "grid" / "listbox" / "menu" / "navigation" / "tooltip" / "tree"
size
必填：是；声明来源：上游声明。
rovingFocusGroupRootStyle
必填：是；声明来源：上游声明。
rovingFocusGroupRootStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
dropdownKls
必填：是；声明来源：上游声明。
dropdownKls 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
triggerId
必填：是；声明来源：上游声明。
dropdownListWrapperRef
必填：是；声明来源：上游声明。
dropdownListWrapperRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: Parameters<Extract<NonNullable<(AsamDropdownMenuExpose)["dropdownListWrapperRef"]>, (...args: never[]) => unknown>>[0]): void
handleKeydown
必填：是；声明来源：上游声明。
handleKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: KeyboardEvent): void
handleFocus
必填：是；声明来源：上游声明。
handleFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
AsamDropdownMenuExpose 公开类型视图
ts
import type { AsamDropdownMenuExpose } from '@asam-ui/ui';
// AsamDropdownMenuExpose
type PublicContract = {
"role": "group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined;
"size": string | undefined;
"rovingFocusGroupRootStyle": (AsamDropdownMenuExpose)["rovingFocusGroupRootStyle"];
"dropdownKls": string[];
"triggerId": string;
"dropdownListWrapperRef": (AsamDropdownMenuExpose)["dropdownListWrapperRef"];
"handleKeydown": (event: KeyboardEvent) => void;
"handleFocus": (e: FocusEvent) => void;
};