Menu 菜单

MoMenu 用于操作菜单、更多操作和多级菜单。默认把菜单面板传送到 body，避免被父容器的 overflow 裁剪。

基础用法

Light

尚未选择

Dark

尚未选择

<script setup lang="ts">
const items = [
  { label: "编辑", value: "edit", description: "修改当前记录" },
  { label: "复制", value: "copy", description: "复制一份配置" },
  { label: "删除", value: "delete", description: "移除当前记录" }
];

function handleSelect(value, item) {
  console.log(value, item);
}
</script>

<template>
  <MoMenu :items="items" @select="handleSelect">
    <template #trigger>
      <MoButton>打开菜单</MoButton>
    </template>
  </MoMenu>
</template>

二级菜单

Light

尚未选择

Dark

尚未选择

const items = [
  { label: "重命名", value: "rename" },
  {
    label: "更多操作",
    children: [
      { label: "归档", value: "archive" },
      { label: "导出", value: "export" },
      { label: "删除", value: "delete", disabled: true }
    ]
  }
];

自定义图标和内容

Light

Dark

<MoMenu :items="items">
  <template #trigger>
    <MoButton>带图标</MoButton>
  </template>

  <template #icon="{ item }">
    {{ item.icon }}
  </template>

  <template #item="{ item }">
    <span>{{ item.label }}</span>
    <span>自定义菜单项内容</span>
  </template>
</MoMenu>

位置和尺寸

Light

Dark

<MoMenu
  :items="items"
  placement="bottom-end"
  :width="220"
  :offset="10"
/>

Teleport

默认 teleported=true，菜单面板会挂到 body，适合弹层不被父容器 overflow 裁剪。需要让菜单跟随局部容器层级时，可以关闭传送。

<MoMenu :items="items" :teleported="false" />

Select 事件

Light

尚未选择

Dark

尚未选择

function handleSelect(value, item, index, parent, path) {
  console.log(value, item, index, parent, path);
}

API

属性	说明	类型	默认值
items	菜单项	MenuItemOption[]	[]
theme	主题	light | dark	light
placement	弹出位置	auto | bottom-start | bottom-end | top-start | top-end	auto
width	菜单宽度	string | number	272
zIndex	菜单层级	number	9999
teleported	是否挂载到 body	boolean	true
offset	触发器和菜单间距	number	8

MenuItemOption

字段	说明	类型
label	菜单项文本	string
value	菜单项值；未传时使用路径文本	string | number
description	菜单项说明	string
disabled	是否禁用	boolean
children	子菜单	MenuItemOption[]

Events

事件	说明	回调参数
select	点击叶子菜单项时触发	value, item, index, parent, path

Slots

插槽	说明
trigger	自定义触发器
icon	自定义菜单项图标，参数 { item, index, active, parent, path, level }
item	自定义菜单项内容，参数 { item, index, active, parent, path, level, hasChildren }
submenu-arrow	自定义子菜单箭头