在 Element UI(针对 Vue 2)和 Element Plus(针对 Vue 3)中,NavMenu
导航菜单组件通常被称为 el-menu
。虽然两个版本在 API 和实现上可能有一些细微的差别,但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-menu
组件。
Vue 2 + Element UI
在 Vue 2 的 Element UI 中,el-menu
组件用于创建导航菜单。
属性(Props)
mode
:菜单模式,如horizontal
(水平)或vertical
(垂直)。default-active
:默认激活的菜单项的索引。default-openeds
:默认展开的菜单项的索引数组(仅当mode
为vertical
时有效)。unique-opened
:是否只保持一个子菜单的展开(仅当mode
为vertical
时有效)。router
:是否启用路由模式。background-color
:菜单的背景色。text-color
:菜单的文字颜色。active-text-color
:当前激活菜单的文字颜色。- …(还有其他属性,具体请参考 Element UI 官方文档)
事件(Events)
select
:当菜单项被点击时触发。open
:当子菜单展开时触发。close
:当子菜单关闭时触发。- …(还有其他事件,具体请参考 Element UI 官方文档)
示例
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
@select="handleSelect"
mode="vertical"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu>
<!-- 其他菜单项 -->
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex = key;
}
}
};
</script>
Vue 3 + Element Plus
在 Vue 3 的 Element Plus 中,el-menu
组件的用法与 Vue 2 的 Element UI 类似,但可能会有一些 API 变动和新增功能。
属性(Props)和事件(Events)
Element Plus 的 el-menu
组件的大部分属性和事件与 Element UI 保持一致,但可能会有一些细微的差别或新增的属性/事件。
示例(假设与 Element UI 类似)
<template>
<el-menu
:default-active="activeIndex"
@select="handleSelect"
mode="vertical"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template #title>
我的工作台
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu>
<!-- 其他菜单项 -->
</el-menu>
</template>
<script setup>
import { ref } from 'vue';
const activeIndex = ref('1');
function handleSelect(key, keyPath) {
console.log(key, keyPath);
activeIndex.value = key;
}
</script>
注意:由于 Element Plus 还在不断发展中,具体的 API 和使用方法可能会有所不同