# VMenu 组件 API 文档

## 组件简介 | Component Introduction
`VMenu` 是基于 Element Plus 的菜单组件，支持多级菜单、折叠、图标等功能。

`VMenu` is a menu component based on Element Plus, supporting multi-level menus, collapse, icons, and more.

---

## Props/属性
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| width | 菜单宽度 | String/Number | 否 | 'auto' |
| options | 菜单数据 | Array | 是 | - |
| keyField | 唯一标识字段 | String | 否 | 'key' |
| titleField | 标题字段 | String | 否 | 'title' |
| childrenField | 子菜单字段 | String | 否 | 'children' |
| showBar | 是否显示折叠条 | Boolean | 否 | false |
| collapse | 是否折叠 | Boolean | 否 | false |

---

## 事件 | Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| barClick | 折叠条点击事件 | (isCollapsed) |

---

## 方法 | Methods (通过 ref 调用)
| 方法名 | 说明 |
|--------|------|
| root | 菜单根节点 DOM |

---

## 示例 | Example
```vue
<template>
  <VMenu :options="menuOptions" :showBar="true" ref="menuRef" @barClick="onBarClick" />
</template>

<script setup>
import { ref } from 'vue'
import { VMenu } from 'your-lib-path'

const menuRef = ref(null)
const menuOptions = [
  { key: 'home', title: '首页', icon: 'HomeFilled' },
  { key: 'about', title: '关于', icon: 'InfoFilled' }
]
function onBarClick(isCollapsed) {
  // 处理折叠事件
}
</script>
```