下拉菜单项 AsamDropdownItem

使用场景

在下拉菜单中定义一个命令、禁用项或分隔项。

组合菜单、图标与公开方法

显式菜单容器与项目共同运行，支持鼠标和键盘选择。

组合菜单、图标与公开方法

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: 'AsamDropdownItemBasicDemo' });
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: 'AsamDropdownItemBasicDemo' });
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>

使用约定

command 接受字符串、数字或对象，disabled 阻止选择，divided 添加分隔。icon 属性与 icon 插槽可显示 ASAM 图标，textValue 供键盘文本搜索。点击与指针事件见 API，业务选择由父 Dropdown 的 command 接收。没有独立 size prop。

组合职责与生命周期

作为 AsamDropdownMenu 的子项消费菜单注入，不能脱离菜单单独承载下拉行为。command 为业务命令，disabled 不执行，divided 添加分隔；icon 属性或 icon 插槽承载图标，default 提供文字。点击和键盘选择最终由父 Dropdown 发出完整 command 事件。

API

属性 `AsamDropdownItemProps`

属性名	说明	类型	默认值
`command`	派发到command回调函数的指令参数	`string \| number \| object \| undefined`	`工厂函数（每个实例创建）`
`disabled`	是否禁用	`boolean \| undefined`	`false`
`divided`	是否显示分隔符	`boolean \| undefined`	`false`
`textValue`	—	`string \| undefined`	`undefined`
`icon`	自定义图标	`string \| Component \| undefined`	`undefined`

事件 `AsamDropdownItemEmits`

属性名	说明	类型	默认值
`pointermove`	—	`[event: PointerEvent]`	—
`pointerleave`	—	`[event: PointerEvent]`	—
`click`	—	`[event: PointerEvent \| KeyboardEvent]`	—

插槽 `AsamDropdownItemSlots`

属性名	说明	类型	默认值
`default`	—	`(() => unknown) \| undefined`	—
`icon`	—	`(() => unknown) \| undefined`	—

实例方法与状态 `AsamDropdownItemExpose`

属性名	说明	类型	默认值
`handleClick`	—	`(event: PointerEvent) => void`	—
`handlePointerMove`	—	`(event: PointerEvent) => void`	—
`handlePointerLeave`	—	`(event: PointerEvent) => void`	—
`propsAndAttrs`	—	`(AsamDropdownItemExpose)["propsAndAttrs"]`	—

参数与事件补充说明

固定 2.14.7 公开参数；运行时默认值来自已安装组件。

参数与事件说明

`command`

必填：否；声明来源：ASAM 声明。

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

`disabled`

必填：否；声明来源：ASAM 声明。

disabled 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（已安装运行时；已安装组件）

`divided`

必填：否；声明来源：ASAM 声明。

divided 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（已安装运行时；已安装组件）

`textValue`

必填：否；声明来源：ASAM 声明。

默认值与来源

undefined（已安装运行时；已安装组件）

`icon`

必填：否；声明来源：ASAM 声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<string | Component | undefined>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

undefined（已安装运行时；已安装组件）

AsamDropdownItemProps 公开类型视图

import type { Component, Attrs } from 'vue';
import type { AsamDropdownItemProps } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamDropdownItemProps
type PublicContract = {
	"command"?: string | number | object | undefined;
	"disabled"?: boolean | undefined;
	"divided"?: boolean | undefined;
	"textValue"?: string | undefined;
	"icon"?: string | Component | undefined;
};

参数与事件说明

`pointermove`

必填：是；声明来源：ASAM 声明。

`pointerleave`

必填：是；声明来源：ASAM 声明。

`click`

必填：是；声明来源：ASAM 声明。

AsamDropdownItemEmits 公开类型视图

import type { AsamDropdownItemEmits } from '@asam-ui/ui';

// AsamDropdownItemEmits
type PublicContract = {
	"pointermove": [event: PointerEvent];
	"pointerleave": [event: PointerEvent];
	"click": [event: PointerEvent | KeyboardEvent];
};

参数与事件说明

`default`

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

`icon`

必填：否；声明来源：ASAM 声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

AsamDropdownItemSlots 公开类型视图

import type { AsamDropdownItemSlots } from '@asam-ui/ui';

// AsamDropdownItemSlots
type PublicContract = {
	"default"?: (() => unknown) | undefined;
	"icon"?: (() => unknown) | undefined;
};

参数与事件说明

`handleClick`

必填：是；声明来源：上游声明。

handleClick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: PointerEvent): void

`handlePointerMove`

必填：是；声明来源：上游声明。

handlePointerMove 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: PointerEvent): void

`handlePointerLeave`

必填：是；声明来源：上游声明。

handlePointerLeave 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: PointerEvent): void

`propsAndAttrs`

必填：是；声明来源：上游声明。

propsAndAttrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

propsAndAttrs.disabled: boolean — 上游声明
枚举：false / true
propsAndAttrs.command: (NonNullable<(AsamDropdownItemExpose)["propsAndAttrs"]>)["command"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
propsAndAttrs.divided: boolean — 上游声明
枚举：false / true
propsAndAttrs.icon: (NonNullable<(AsamDropdownItemExpose)["propsAndAttrs"]>)["icon"] — 上游声明
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(NonNullable<(AsamDropdownItemExpose)["propsAndAttrs"]>)["icon"]>, (...args: never[]) => unknown>>[1]): any
- propsAndAttrs.icon.__isFragment: undefined — 依赖声明
- propsAndAttrs.icon.__isTeleport: undefined — 依赖声明
- propsAndAttrs.icon.__isSuspense: undefined — 依赖声明
propsAndAttrs.textValue: string | undefined — 上游声明
propsAndAttrs.onClick: ((...args: any[]) => any) | undefined — 上游声明
事件参数：(...args: any[]): any
propsAndAttrs.onPointerleave: ((...args: any[]) => any) | undefined — 上游声明
事件参数：(...args: any[]): any
propsAndAttrs.onPointermove: ((...args: any[]) => any) | undefined — 上游声明
事件参数：(...args: any[]): any

AsamDropdownItemExpose 公开类型视图

import type { Attrs } from 'vue';
import type { AsamDropdownItemExpose, AsamDropdownItemProps } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamDropdownItemExpose
type PublicContract = {
	"handleClick": (event: PointerEvent) => void;
	"handlePointerMove": (event: PointerEvent) => void;
	"handlePointerLeave": (event: PointerEvent) => void;
	"propsAndAttrs": (AsamDropdownItemExpose)["propsAndAttrs"];
};

下拉菜单项 AsamDropdownItem

使用场景 ​

组合菜单、图标与公开方法 ​

组合菜单、图标与公开方法

使用约定 ​

组合职责与生命周期 ​

API

属性 AsamDropdownItemProps

事件 AsamDropdownItemEmits

插槽 AsamDropdownItemSlots

实例方法与状态 AsamDropdownItemExpose

关联组件

参数与事件说明

command

默认值与来源

disabled

默认值与来源

divided

默认值与来源

textValue

默认值与来源

icon

默认值与来源

参数与事件说明

pointermove

pointerleave

click

参数与事件说明

default

icon

参数与事件说明

handleClick

handlePointerMove

handlePointerLeave

propsAndAttrs

使用场景

组合菜单、图标与公开方法

使用约定

组合职责与生命周期

属性 `AsamDropdownItemProps`

事件 `AsamDropdownItemEmits`

插槽 `AsamDropdownItemSlots`

实例方法与状态 `AsamDropdownItemExpose`

`command`

`disabled`

`divided`

`textValue`

`icon`

`pointermove`

`pointerleave`

`click`

`default`

`icon`

`handleClick`

`handlePointerMove`

`handlePointerLeave`

`propsAndAttrs`