Menu 菜单

菜单组件用于显示一组操作选项，通常用于上下文菜单、下拉菜单等场景。

参数

Props

名称	类型	默认值	描述
menu	MenuItem[]	[]	菜单项配置
trigger	'click' | 'hover' | 'contextmenu'	'click'	触发方式
placement	Placement	'bottom'	菜单弹出位置
disabled	boolean	false	是否禁用菜单
appendTo	string | HTMLElement | null	body	菜单挂载位置

Slots

名称	描述	参数
default	默认插槽，用于放置触发菜单的元素	-

Events

名称	描述	参数
visible-change	菜单显示状态变化时触发	(visible: boolean) => void

示例

基础用法

右键菜单

不同位置

带图标

禁用状态

多级菜单

TypeScript

// 弹出位置类型
export type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end';

// 菜单项类型
export interface MenuItem {
  // 菜单项类型，默认为普通菜单项，divider 为分割线
  type?: 'divider' | 'item';
  // 菜单项文本
  label?: string;
  // 菜单项图标
  icon?: string;
  // 点击菜单项时的回调函数
  action?: () => void;
  // 子菜单项
  children?: MenuItem[];
  // 是否禁用
  disabled?: boolean;
  // 是否隐藏
  hidden?: boolean;
}