使用场景
将次要操作收纳在可触发的菜单中。
组合菜单、图标与公开方法
显式菜单容器与项目共同运行，支持鼠标和键盘选择。
组合菜单、图标与公开方法
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: 'AsamDropdownBasicDemo' });
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: 'AsamDropdownBasicDemo' });
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>四档控件密度
逐个打开四档菜单，观察对应菜单密度。
四档控件密度
vue
<template>
<div class="actions">
<AsamDropdown
v-for="size in sizes"
:key="size"
v-bind="{ size, trigger: 'click', wrapMenu: true }"
>
<AsamButton type="default" native-type="button">{{ size }}</AsamButton>
<template #dropdown>
<AsamDropdownItem command="save">保存</AsamDropdownItem>
<AsamDropdownItem command="cancel">取消</AsamDropdownItem>
</template>
</AsamDropdown>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDropdownSizesDemo' });
import { AsamButton, AsamDropdown, AsamDropdownItem } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
</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>vue
<template>
<div class="actions">
<AsamDropdown
v-for="size in sizes"
:key="size"
v-bind="{ size, trigger: 'click', wrapMenu: true }"
>
<AsamButton type="default" native-type="button">{{ size }}</AsamButton>
<template #dropdown>
<AsamDropdownItem command="save">保存</AsamDropdownItem>
<AsamDropdownItem command="cancel">取消</AsamDropdownItem>
</template>
</AsamDropdown>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDropdownSizesDemo' });
import { AsamButton, AsamDropdown, AsamDropdownItem } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
</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>使用约定
默认 wrapMenu=false 原样透传 dropdown 插槽。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
显隐与关闭守卫
显隐与关闭守卫
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<span class="el-dropdown-link">
下拉列表
<AsamIcon class="el-icon--right">
<arrow-down />
</AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script lang="ts" setup>
import { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';
import { ArrowDown } from '@asam-ui/icons-vue';
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<span class="el-dropdown-link">
下拉列表
<AsamIcon class="el-icon--right">
<arrow-down />
</AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script setup>
import { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';
import { ArrowDown } from '@asam-ui/icons-vue';
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>定位方向
定位方向
vue
<template>
<div class="flex flex-wrap items-center gap-4">
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top-start">
<AsamButton type="default">顶部左侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top">
<AsamButton type="default">顶部</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top-end">
<AsamButton type="default">顶部右侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom-start">
<AsamButton type="default">底部左侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom">
<AsamButton type="default">底部</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom-end">
<AsamButton type="default">底部右侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.gap-4 {
gap: var(--asam-space-lg);
}
</style>vue
<template>
<div class="flex flex-wrap items-center gap-4">
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top-start">
<AsamButton type="default">顶部左侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top">
<AsamButton type="default">顶部</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="top-end">
<AsamButton type="default">顶部右侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom-start">
<AsamButton type="default">底部左侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom">
<AsamButton type="default">底部</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown trigger="hover" :wrap-menu="false" placement="bottom-end">
<AsamButton type="default">底部右侧</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作一</AsamDropdownItem>
<AsamDropdownItem>操作二</AsamDropdownItem>
<AsamDropdownItem>操作三</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script setup>
import { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.gap-4 {
gap: var(--asam-space-lg);
}
</style>完整交互：triggering-element
完整交互：triggering-element
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="flex flex-wrap items-center demo-layout-1">
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<AsamButton type="default">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
<AsamDropdownItem>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
split-button
type="primary"
@click="handleClick"
>
下拉列表
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem divided>操作 4</AsamDropdownItem>
<AsamDropdownItem>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script lang="ts" setup>
import {
AsamButton,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon
} from '@asam-ui/ui';
import { ArrowDown } from '@asam-ui/icons-vue';
const handleClick = () => {
// eslint-disable-next-line no-alert
alert('button click');
};
</script>
<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="flex flex-wrap items-center demo-layout-1">
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<AsamButton type="default">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</AsamButton>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
<AsamDropdownItem>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
split-button
type="primary"
@click="handleClick"
>
下拉列表
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem divided>操作 4</AsamDropdownItem>
<AsamDropdownItem>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script setup>
import {
AsamButton,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon
} from '@asam-ui/ui';
import { ArrowDown } from '@asam-ui/icons-vue';
const handleClick = () => {
// eslint-disable-next-line no-alert
alert('button click');
};
</script>
<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>完整交互：how-to-trigger
完整交互：how-to-trigger
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamRow class="block-col-2">
<AsamCol :span="8">
<span class="demonstration">悬停触发</span>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
<AsamCol :span="8">
<span class="demonstration">点击触发</span>
<AsamDropdown placement="bottom" :wrap-menu="false" trigger="click">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
<AsamCol :span="8">
<span class="demonstration">右键触发</span>
<AsamDropdown placement="bottom" :wrap-menu="false" trigger="contextmenu">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
</AsamRow>
</template>
<script lang="ts" setup>
import {
AsamCol,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon,
AsamRow
} from '@asam-ui/ui';
import {
ArrowDown,
Check,
CircleCheck,
CirclePlus,
CirclePlusFilled,
Plus
} from '@asam-ui/icons-vue';
</script>
<style scoped>
.block-col-2 .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.block-col-2 .el-dropdown-link {
display: flex;
align-items: center;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamRow class="block-col-2">
<AsamCol :span="8">
<span class="demonstration">悬停触发</span>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
<AsamCol :span="8">
<span class="demonstration">点击触发</span>
<AsamDropdown placement="bottom" :wrap-menu="false" trigger="click">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
<AsamCol :span="8">
<span class="demonstration">右键触发</span>
<AsamDropdown placement="bottom" :wrap-menu="false" trigger="contextmenu">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</AsamCol>
</AsamRow>
</template>
<script setup>
import {
AsamCol,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon,
AsamRow
} from '@asam-ui/ui';
import {
ArrowDown,
Check,
CircleCheck,
CirclePlus,
CirclePlusFilled,
Plus
} from '@asam-ui/icons-vue';
</script>
<style scoped>
.block-col-2 .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.block-col-2 .el-dropdown-link {
display: flex;
align-items: center;
}
</style>完整交互：menu-hiding-behavior
菜单命令
菜单命令
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false" @command="handleCommand">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem command="a">操作 1</AsamDropdownItem>
<AsamDropdownItem command="b">操作 2</AsamDropdownItem>
<AsamDropdownItem command="c">操作 3</AsamDropdownItem>
<AsamDropdownItem command="d" disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem command="e" divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script lang="ts" setup>
import {
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon,
AsamMessage,
type AsamMessageHandler
} from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
import { ArrowDown } from '@asam-ui/icons-vue';
const handleCommand = (command: string | number | object) => {
trackAsamMessage(AsamMessage(`点击的菜单项：${command}`));
};
const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
if (mountedAsamMessage) ownedAsamMessage.add(handle);
else handle.close();
return handle;
};
onBeforeUnmount(() => {
mountedAsamMessage = false;
for (const handle of ownedAsamMessage) handle.close();
ownedAsamMessage.clear();
});
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamDropdown trigger="hover" placement="bottom" :wrap-menu="false" @command="handleCommand">
<span class="el-dropdown-link">
下拉列表<AsamIcon class="el-icon--right"><arrow-down /></AsamIcon>
</span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem command="a">操作 1</AsamDropdownItem>
<AsamDropdownItem command="b">操作 2</AsamDropdownItem>
<AsamDropdownItem command="c">操作 3</AsamDropdownItem>
<AsamDropdownItem command="d" disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem command="e" divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script setup>
import {
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
AsamIcon,
AsamMessage
} from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
import { ArrowDown } from '@asam-ui/icons-vue';
const handleCommand = (command) => {
trackAsamMessage(AsamMessage(`点击的菜单项：${command}`));
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
if (mountedAsamMessage) ownedAsamMessage.add(handle);
else handle.close();
return handle;
};
onBeforeUnmount(() => {
mountedAsamMessage = false;
for (const handle of ownedAsamMessage) handle.close();
ownedAsamMessage.clear();
});
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>实例打开与关闭
实例打开与关闭
vue
<template>
<div style="font-size: 14px">
<p class="example-paragraph">打开（关闭）列表二时会关闭（打开）列表一。</p>
</div>
<div style="margin: 15px">
<AsamButton type="default" @click="showClick">显示（show）</AsamButton>
</div>
<AsamDropdown
placement="bottom"
:wrap-menu="false"
ref="dropdown1"
trigger="contextmenu"
style="margin-right: 30px"
>
<span class="el-dropdown-link"> 下拉列表一 </span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
placement="bottom"
:wrap-menu="false"
trigger="contextmenu"
@visible-change="handleVisible2"
>
<span class="el-dropdown-link"> 下拉列表二 </span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script lang="ts" setup>
import {
AsamButton,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
type AsamDropdownExpose as DropdownInstance
} from '@asam-ui/ui';
import { ref } from 'vue';
const dropdown1 = ref<DropdownInstance>();
function handleVisible2(visible: boolean) {
if (!dropdown1.value) return;
if (visible) {
dropdown1.value.handleClose();
} else {
dropdown1.value.handleOpen();
}
}
function showClick() {
if (!dropdown1.value) return;
dropdown1.value.handleOpen();
}
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div style="font-size: 14px">
<p class="example-paragraph">打开（关闭）列表二时会关闭（打开）列表一。</p>
</div>
<div style="margin: 15px">
<AsamButton type="default" @click="showClick">显示（show）</AsamButton>
</div>
<AsamDropdown
placement="bottom"
:wrap-menu="false"
ref="dropdown1"
trigger="contextmenu"
style="margin-right: 30px"
>
<span class="el-dropdown-link"> 下拉列表一 </span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
placement="bottom"
:wrap-menu="false"
trigger="contextmenu"
@visible-change="handleVisible2"
>
<span class="el-dropdown-link"> 下拉列表二 </span>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem disabled>操作 4</AsamDropdownItem>
<AsamDropdownItem divided>操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script setup>
import { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
import { ref } from 'vue';
const dropdown1 = ref();
function handleVisible2(visible) {
if (!dropdown1.value) return;
if (visible) {
dropdown1.value.handleClose();
} else {
dropdown1.value.handleOpen();
}
}
function showClick() {
if (!dropdown1.value) return;
dropdown1.value.handleOpen();
}
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>完整交互：sizes
完整交互：sizes
vue
<template>
<div class="demo-root-layout">
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
size="large"
split-button
type="primary"
>
大尺寸
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
split-button
type="primary"
>
默认
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
size="small"
split-button
type="primary"
>
小尺寸
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script lang="ts" setup>
import { AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
</script>
<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>vue
<template>
<div class="demo-root-layout">
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
size="large"
split-button
type="primary"
>
大尺寸
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
split-button
type="primary"
>
默认
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
<AsamDropdown
trigger="hover"
placement="bottom"
:wrap-menu="false"
size="small"
split-button
type="primary"
>
小尺寸
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem>操作 1</AsamDropdownItem>
<AsamDropdownItem>操作 2</AsamDropdownItem>
<AsamDropdownItem>操作 3</AsamDropdownItem>
<AsamDropdownItem>操作 4</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</div>
</template>
<script setup>
import { AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
</script>
<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>虚拟触发目标
虚拟触发目标
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div @click="handleClick" @contextmenu="handleContextmenu">
<AsamCard class="content" body-class="card-body"> 右键点击 </AsamCard>
</div>
<AsamDropdown
:wrap-menu="false"
ref="dropdownRef"
:virtual-ref="triggerRef"
:show-arrow="false"
:popper-options="{
modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
}"
virtual-triggering
trigger="contextmenu"
placement="bottom-start"
>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script lang="ts" setup>
import {
AsamCard,
AsamDropdown,
AsamDropdownItem,
AsamDropdownMenu,
type AsamDropdownExpose as DropdownInstance
} from '@asam-ui/ui';
import { ref } from 'vue';
import { Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from '@asam-ui/icons-vue';
const dropdownRef = ref<DropdownInstance>();
const position = ref(DOMRect.fromRect());
const triggerRef = ref({
getBoundingClientRect: () => position.value
});
const handleClick = () => {
dropdownRef.value?.handleClose();
};
const handleContextmenu = (event: MouseEvent) => {
const { clientX, clientY } = event;
position.value = DOMRect.fromRect({
x: clientX,
y: clientY
});
event.preventDefault();
dropdownRef.value?.handleOpen();
};
</script>
<style scoped>
.content {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.content :deep(.card-body) {
flex-grow: 0;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div @click="handleClick" @contextmenu="handleContextmenu">
<AsamCard class="content" body-class="card-body"> 右键点击 </AsamCard>
</div>
<AsamDropdown
:wrap-menu="false"
ref="dropdownRef"
:virtual-ref="triggerRef"
:show-arrow="false"
:popper-options="{
modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
}"
virtual-triggering
trigger="contextmenu"
placement="bottom-start"
>
<template #dropdown>
<AsamDropdownMenu>
<AsamDropdownItem :icon="Plus">操作 1</AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlusFilled"> 操作 2 </AsamDropdownItem>
<AsamDropdownItem :icon="CirclePlus">操作 3</AsamDropdownItem>
<AsamDropdownItem :icon="Check">操作 4</AsamDropdownItem>
<AsamDropdownItem :icon="CircleCheck">操作 5</AsamDropdownItem>
</AsamDropdownMenu>
</template>
</AsamDropdown>
</template>
<script setup>
import { AsamCard, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';
import { ref } from 'vue';
import { Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from '@asam-ui/icons-vue';
const dropdownRef = ref();
const position = ref(DOMRect.fromRect());
const triggerRef = ref({
getBoundingClientRect: () => position.value
});
const handleClick = () => {
dropdownRef.value?.handleClose();
};
const handleContextmenu = (event) => {
const { clientX, clientY } = event;
position.value = DOMRect.fromRect({
x: clientX,
y: clientY
});
event.preventDefault();
dropdownRef.value?.handleOpen();
};
</script>
<style scoped>
.content {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.content :deep(.card-body) {
flex-grow: 0;
}
</style>组合职责与生命周期
默认 dropdown 插槽提供原生菜单容器；显式 wrapMenu=true 时自动建立菜单容器，手动使用 AsamDropdownMenu 时设 wrapMenu=false，避免嵌套菜单。 完整说明。
官方示例默认值适配
AsamDropdown 的默认 trigger 为原生 hover；需要点击时显式设置 trigger="click"。 完整说明。
局部与全局挂载
切换公开挂载参数后，再打开浮层观察内容位于当前组件附近或挂载到 body。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<div class="actions">
<AsamDropdown
ref="menu"
v-bind="{ trigger: 'click', wrapMenu: false }"
@command="select"
:teleported="globalPopup"
>
<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>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDropdownBasicDemo' });
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);
};
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</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>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</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 ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<div class="actions">
<AsamDropdown
ref="menu"
v-bind="{ trigger: 'click', wrapMenu: false }"
@command="select"
:teleported="globalPopup"
>
<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>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDropdownBasicDemo' });
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);
};
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</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>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamDropdownProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
trigger | 触发下拉的行为 | enum"hover" | "click" | "contextmenu"完整类型：(AsamDropdownProps)["trigger"] | — |
triggerKeys | 指定键盘上哪些按键可以触发操作 | string[] | undefined | — |
virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | undefined | — |
virtualRef | 指示下拉框所依附的参考元素 | (AsamDropdownProps)["virtualRef"] | — |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamDropdownProps)["effect"] | — |
type | 菜单按钮类型，同 Button 组件一样，仅在 split-button 为 true 的情况下有效。 | enum"" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamDropdownProps)["type"] | — |
placement | 菜单弹出位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamDropdownProps)["placement"] | — |
popperOptions | Popper 配置参数。 | (AsamDropdownProps)["popperOptions"] | — |
id | — | string | undefined | — |
splitButton | 下拉触发元素呈现为按钮组 | boolean | undefined | — |
hideOnClick | 是否在点击菜单项后隐藏菜单 | (AsamDropdownProps)["hideOnClick"] | — |
loop | — | (AsamDropdownProps)["loop"] | — |
showArrow | tooltip 的内容是否有箭头 | (AsamDropdownProps)["showArrow"] | — |
showTimeout | 展开下拉菜单的延时，仅在 trigger 为 hover 时有效 | number | undefined | — |
hideTimeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） | number | undefined | — |
tabindex | 下拉菜单的原生 tabindex。 | (AsamDropdownProps)["tabindex"] | — |
maxHeight | 菜单最大高度 | (AsamDropdownProps)["maxHeight"] | — |
popperClass | 自定义浮层类名 | AsamDropdownProps["popperClass"] | — |
popperStyle | 自定义浮层类名 | import("vue").StyleValue | — |
disabled | 是否禁用 | boolean | undefined | — |
role | 下拉菜单的 ARIA 属性。根据具体场景，您可能想要将此更改为“navigation” | enum"group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree"完整类型：(AsamDropdownProps)["role"] | — |
buttonProps | 按钮组件参数，参阅按钮参数表。 | (AsamDropdownProps)["buttonProps"] | — |
teleported | 是否将下拉列表插入至 body 元素 | (AsamDropdownProps)["teleported"] | — |
appendTo | dropdown 的内容将挂载到哪一个元素上 | (AsamDropdownProps)["appendTo"] | — |
persistent | 当下拉菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁 | (AsamDropdownProps)["persistent"] | — |
size | 菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
wrapMenu | 显式 ASAM 菜单组合；省略或 false 时原样透传原生下拉插槽。 | boolean | undefined | false |
zIndex | — | number | undefined | — |
事件 AsamDropdownEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
command | — | [command: string | number | object, instance: ComponentInternalInstance | null, event: PointerEvent | KeyboardEvent] | — |
click | — | [event: MouseEvent] | — |
visible-change | — | [visible: boolean] | — |
visibleChange | — | [visible: boolean] | — |
插槽 AsamDropdownSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | () => unknown | — |
dropdown | — | () => unknown | — |
实例方法与状态 AsamDropdownExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
open | — | () => void | — |
close | — | () => void | — |
popperRef | — | (AsamDropdownExpose)["popperRef"] | — |
ns | — | (AsamDropdownExpose)["ns"] | — |
t | — | AsamDropdownExpose["t"] | — |
wrapStyle | — | (AsamDropdownExpose)["wrapStyle"] | — |
handleClose | — | () => void | — |
triggerId | — | string | — |
contentRef | — | HTMLElement | undefined | — |
handleOpen | — | () => void | — |
scrollbar | — | null | — |
dropdownTriggerKls | — | string[] | — |
dropdownSize | — | enum"" | "large" | "default" | "small"完整类型："" | "large" | "default" | "small" | — |
currentTabId | — | string | null | — |
handleCurrentTabIdChange | — | (id: string) => void | — |
handlerMainButtonClick | — | (event: MouseEvent) => void | — |
handleBeforeShowTooltip | — | () => void | — |
handleShowTooltip | — | (event?: Event) => void | — |
handleBeforeHideTooltip | — | () => void | — |
triggeringElementRef | — | any | — |
referenceElementRef | — | any | — |
类型 AsamDropdownTrigger
用法与契约补充说明
使用约定
默认 wrapMenu=false 原样透传 dropdown 插槽。直接提供 AsamDropdownItem 时显式设置 wrapMenu=true；传入 AsamDropdownMenu 时保持 false。command 保留命令、项目实例和触发事件。支持 click/hover/contextmenu、splitButton、禁用、显隐延时、位置和浮层配置；open/close 是 ASAM 便捷方法，handleOpen/handleClose 等公开方法仍按 API 使用。 控件密度支持 large/big/default/small；省略时遵循最近 group、Form、ConfigProvider 的顺序，显式 prop 优先。
组合职责与生命周期
默认 dropdown 插槽提供原生菜单容器；显式 wrapMenu=true 时自动建立菜单容器，手动使用 AsamDropdownMenu 时设 wrapMenu=false，避免嵌套菜单。splitButton 的左按钮触发 click，右触发器展开菜单；trigger、triggerKeys、loop 和 tabindex 管理鼠标与键盘入口。command 保留 command、item 与 Event 三个参数，visible-change 通知显隐。hideOnClick 决定选择后关闭，disabled 不执行命令。handleOpen/handleClose 是实时实例方法。virtualTriggering 配合 virtualRef 使用外部或坐标触发器，placement/offset/popperOptions 控制定位，teleported/appendTo 控制挂载。size 使用 large/big/default/small 四档控件密度。
官方示例默认值适配
AsamDropdown 的默认 trigger 为原生 hover；需要点击时显式设置 trigger="click"。悬停分支须显式设置 trigger="hover"；点击和右键分支分别使用 click、contextmenu。本页定位示例显式使用 bottom 或各个方向；组件默认 placement 为原生 bottom。显式使用 AsamDropdownMenu 时设置 wrapMenu=false。
关联组件
参数与事件补充说明
参数与事件说明
trigger
必填：否；声明来源：ASAM 声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "click" / "contextmenu"
默认值与来源
未知 / 未声明固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
triggerKeys
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：`['Enter', 'Space', 'ArrowDown', 'NumpadEnter']`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space,
EVENT_CODE.down,
]（2.14.7；源码事实，未作为 ASAM 运行实测）
virtualTriggering
必填：否；声明来源：ASAM 声明。
virtualTriggering 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
virtualRef
必填：否；声明来源：ASAM 声明。
virtualRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
virtualRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：否；声明来源：ASAM 声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：ASAM 声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
未知 / 未声明固定上游文档默认：bottom（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'bottom'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperOptions
必填：否；声明来源：ASAM 声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamDropdownProps)["popperOptions"]>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamDropdownProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamDropdownProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamDropdownProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDropdownProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
id
必填：否；声明来源：ASAM 声明。
splitButton
必填：否；声明来源：ASAM 声明。
splitButton 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
hideOnClick
必填：否；声明来源：ASAM 声明。
hideOnClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
loop
必填：否；声明来源：ASAM 声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showArrow
必填：否；声明来源：ASAM 声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showTimeout
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：150（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：150（2.14.7；源码事实，未作为 ASAM 运行实测）
hideTimeout
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：150（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：150（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
maxHeight
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
popperClass
必填：否；声明来源：ASAM 声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：ASAM 声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
role
必填：否；声明来源：ASAM 声明。
role 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："group" / "dialog" / "grid" / "listbox" / "menu" / "navigation" / "tooltip" / "tree"
默认值与来源
未知 / 未声明固定上游文档默认：menu（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'menu'（2.14.7；源码事实，未作为 ASAM 运行实测）
buttonProps
必填：否；声明来源：ASAM 声明。
buttonProps 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
buttonProps.size:"" | "large" | "default" | "small" | undefined— 上游声明用于控制该按钮组内按钮的大小
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
""/"large"/"default"/"small"buttonProps.disabled:boolean | undefined— 上游声明按钮已禁用
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.type:"" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined— 上游声明用于控制该按钮组内按钮的类型
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
""/"default"/"text"/"primary"/"success"/"danger"/"warning"/"info"buttonProps.icon:PublicMember<NonNullable<(AsamDropdownProps)["buttonProps"]>, "icon">— 上游声明自定义图标
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDropdownProps)["buttonProps"]>, "icon">>, (...args: never[]) => unknown>>[1]): anybuttonProps.icon.__isFragment:undefined— 依赖声明buttonProps.icon.__isTeleport:undefined— 依赖声明buttonProps.icon.__isSuspense:undefined— 依赖声明
buttonProps.nativeType:"button" | "submit" | "reset" | undefined— 上游声明基础按钮的表单类型。
固定上游文档默认：
button（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"button"/"submit"/"reset"buttonProps.loading:boolean | undefined— 上游声明自定义加载中组件
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.loadingIcon:PublicMember<NonNullable<(AsamDropdownProps)["buttonProps"]>, "loadingIcon">— 上游声明自定义加载中状态图标组件
固定上游文档默认：
Loading（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDropdownProps)["buttonProps"]>, "loadingIcon">>, (...args: never[]) => unknown>>[1]): anybuttonProps.loadingIcon.__isFragment:undefined— 依赖声明buttonProps.loadingIcon.__isTeleport:undefined— 依赖声明buttonProps.loadingIcon.__isSuspense:undefined— 依赖声明
buttonProps.plain:boolean | undefined— 上游声明是否纯色
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.text:boolean | undefined— 上游声明是否为文字按钮
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.link:boolean | undefined— 上游声明是否为链接按钮
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.bg:boolean | undefined— 上游声明是否显示文字按钮背景颜色
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.autofocus:boolean | undefined— 上游声明基础按钮自动聚焦。
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.round:boolean | undefined— 上游声明是否为圆角按钮
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.circle:boolean | undefined— 上游声明是否为圆形按钮
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.dashed:boolean | undefined— 上游声明是否是虚线按钮
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.color:string | undefined— 上游声明自定义按钮颜色，并自动计算 hover 与 active 状态颜色。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）buttonProps.dark:boolean | undefined— 上游声明dark 模式, 意味着自动设置 color 为 dark 模式的颜色
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.autoInsertSpace:boolean | undefined— 上游声明自动在两个中文字符之间插入空格。
固定上游文档默认：
false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truebuttonProps.tag:AsamDropdownItemProps["icon"]— 上游声明自定义元素标签
固定上游文档默认：
button（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDropdownProps)["buttonProps"]>, "tag">>, (...args: never[]) => unknown>>[1]): anybuttonProps.tag.__isFragment:undefined— 依赖声明buttonProps.tag.__isTeleport:undefined— 依赖声明buttonProps.tag.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
appendTo
必填：否；声明来源：ASAM 声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：ASAM 声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
wrapMenu
必填：否；声明来源：ASAM 声明。
wrapMenu 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）zIndex
必填：否；声明来源：ASAM 声明。
AsamDropdownProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamDropdownProps, AsamDropdownExpose, AsamDropdownItemProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDropdownProps
type PublicContract = {
"trigger"?: (AsamDropdownProps)["trigger"];
"triggerKeys"?: string[] | undefined;
"virtualTriggering"?: boolean | undefined;
"virtualRef"?: (AsamDropdownProps)["virtualRef"];
"effect"?: (AsamDropdownProps)["effect"];
"type"?: (AsamDropdownProps)["type"];
"placement"?: (AsamDropdownProps)["placement"];
"popperOptions"?: (AsamDropdownProps)["popperOptions"];
"id"?: string | undefined;
"splitButton"?: boolean | undefined;
"hideOnClick"?: (AsamDropdownProps)["hideOnClick"];
"loop"?: (AsamDropdownProps)["loop"];
"showArrow"?: (AsamDropdownProps)["showArrow"];
"showTimeout"?: number | undefined;
"hideTimeout"?: number | undefined;
"tabindex"?: (AsamDropdownProps)["tabindex"];
"maxHeight"?: (AsamDropdownProps)["maxHeight"];
"popperClass"?: AsamDropdownProps["popperClass"];
"popperStyle"?: import("vue").StyleValue;
"disabled"?: boolean | undefined;
"role"?: (AsamDropdownProps)["role"];
"buttonProps"?: (AsamDropdownProps)["buttonProps"];
"teleported"?: (AsamDropdownProps)["teleported"];
"appendTo"?: (AsamDropdownProps)["appendTo"];
"persistent"?: (AsamDropdownProps)["persistent"];
"size"?: AsamControlSize | undefined;
"wrapMenu"?: boolean | undefined;
"zIndex"?: number | undefined;
};参数与事件说明
command
必填：是；声明来源：ASAM 声明。
click
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
visibleChange
必填：是；声明来源：ASAM 声明。
AsamDropdownEmits 公开类型视图
ts
import type { ComponentInternalInstance } from 'vue';
import type { AsamDropdownEmits } from '@asam-ui/ui';
// AsamDropdownEmits
type PublicContract = {
"command": [command: string | number | object, instance: ComponentInternalInstance | null, event: PointerEvent | KeyboardEvent];
"click": [event: MouseEvent];
"visible-change": [visible: boolean];
"visibleChange": [visible: boolean];
};参数与事件说明
default
必填：是；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
dropdown
必填：是；声明来源：ASAM 声明。
dropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamDropdownSlots 公开类型视图
ts
import type { AsamDropdownSlots } from '@asam-ui/ui';
// AsamDropdownSlots
type PublicContract = {
"default": () => unknown;
"dropdown": () => unknown;
};参数与事件说明
open
必填：是；声明来源：ASAM 声明。
open 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
close
必填：是；声明来源：ASAM 声明。
close 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
popperRef
必填：是；声明来源：上游声明。
ns
必填：是；声明来源：上游声明。
ns 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
ns.namespace:(NonNullable<(AsamDropdownExpose)["ns"]>)["namespace"]— 上游声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
ns.b:(blockSuffix?: string) => string— 上游声明事件参数：
(blockSuffix?: string | undefined): stringns.e:(element?: string) => string— 上游声明事件参数：
(element?: string | undefined): stringns.m:(modifier?: string) => string— 上游声明事件参数：
(modifier?: string | undefined): stringns.be:(blockSuffix?: string, element?: string) => string— 上游声明事件参数：
(blockSuffix?: string | undefined, element?: string | undefined): stringns.em:(element?: string, modifier?: string) => string— 上游声明事件参数：
(element?: string | undefined, modifier?: string | undefined): stringns.bm:(blockSuffix?: string, modifier?: string) => string— 上游声明事件参数：
(blockSuffix?: string | undefined, modifier?: string | undefined): stringns.bem:(blockSuffix?: string, element?: string, modifier?: string) => string— 上游声明事件参数：
(blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined): stringns.is:{ (name: string, state: boolean | undefined): string; (name: string): string; }— 上游声明事件参数：
(name: string, state: boolean | undefined): string事件参数：
(name: string): stringns.cssVar:(object: Record<string, string>) => Record<string, string>— 上游声明事件参数：
(object: Record<string, string>): Record<string, string>ns.cssVarName:(name: string) => string— 上游声明事件参数：
(name: string): stringns.cssVarBlock:(object: Record<string, string>) => Record<string, string>— 上游声明事件参数：
(object: Record<string, string>): Record<string, string>ns.cssVarBlockName:(name: string) => string— 上游声明事件参数：
(name: string): string
t
必填：是；声明来源：上游声明。
t 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(path: Parameters<Extract<NonNullable<AsamDropdownExpose["t"]>, (...args: never[]) => unknown>>[0], option?: Parameters<Extract<NonNullable<AsamDropdownExpose["t"]>, (...args: never[]) => unknown>>[1]): string
wrapStyle
必填：是；声明来源：上游声明。
wrapStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
handleClose
必填：是；声明来源：上游声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
triggerId
必填：是；声明来源：上游声明。
contentRef
必填：是；声明来源：上游声明。
contentRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
handleOpen
必填：是；声明来源：上游声明。
handleOpen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
scrollbar
必填：是；声明来源：上游声明。
dropdownTriggerKls
必填：是；声明来源：上游声明。
dropdownTriggerKls 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
dropdownSize
必填：是；声明来源：上游声明。
dropdownSize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "large" / "default" / "small"
currentTabId
必填：是；声明来源：上游声明。
handleCurrentTabIdChange
必填：是；声明来源：上游声明。
handleCurrentTabIdChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(id: string): void
handlerMainButtonClick
必填：是；声明来源：上游声明。
handlerMainButtonClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: MouseEvent): void
handleBeforeShowTooltip
必填：是；声明来源：上游声明。
handleBeforeShowTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleShowTooltip
必填：是；声明来源：上游声明。
handleShowTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: Event | undefined): void
handleBeforeHideTooltip
必填：是；声明来源：上游声明。
handleBeforeHideTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
triggeringElementRef
必填：是；声明来源：上游声明。
referenceElementRef
必填：是；声明来源：上游声明。
AsamDropdownExpose 公开类型视图
ts
import type { AsamDropdownExpose, AsamDropdownProps } from '@asam-ui/ui';
// AsamDropdownExpose
type PublicContract = {
"open": () => void;
"close": () => void;
"popperRef": (AsamDropdownExpose)["popperRef"];
"ns": (AsamDropdownExpose)["ns"];
"t": AsamDropdownExpose["t"];
"wrapStyle": (AsamDropdownExpose)["wrapStyle"];
"handleClose": () => void;
"triggerId": string;
"contentRef": HTMLElement | undefined;
"handleOpen": () => void;
"scrollbar": null;
"dropdownTriggerKls": string[];
"dropdownSize": "" | "large" | "default" | "small";
"currentTabId": string | null;
"handleCurrentTabIdChange": (id: string) => void;
"handlerMainButtonClick": (event: MouseEvent) => void;
"handleBeforeShowTooltip": () => void;
"handleShowTooltip": (event?: Event) => void;
"handleBeforeHideTooltip": () => void;
"triggeringElementRef": any;
"referenceElementRef": any;
};组合契约按分支生效；请同时查看公开类型。
AsamDropdownTrigger 公开类型视图
ts
import type { AsamDropdownTrigger } from '@asam-ui/ui';
// AsamDropdownTrigger
type PublicContract = AsamDropdownTrigger;