Vue3 中 Element 导航菜单的封装实例代码

在 Vue3 项目开发中，对 Element 导航菜单进行封装可以提高代码的复用性和可维护性。下面将为您展示一个详细的封装实例代码。

我们需要引入必要的依赖和组件。在 Vue3 中，可以使用以下方式引入 Element 组件库：

import { ElMenu, ElMenuItem } from 'element-plus';

接下来，创建一个名为 CustomMenu 的组件来封装导航菜单。

<template>
  <ElMenu :default-active="activeIndex" mode="horizontal">
    <ElMenuItem v-for="(item, index) in menuItems" :key="index" :index="index">
      {{ item.label }}
    </ElMenuItem>
  </ElMenu>
</template>

<script>
export default {
  name: 'CustomMenu',
  props: {
    menuItems: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
/* 可以添加自定义的样式来美化菜单 */
</style>

在上述代码中，通过 props 接收菜单数据 menuItems 和默认激活的索引 activeIndex。使用 v-for 遍历菜单数据来生成菜单项。

在实际使用时，父组件可以这样传递数据给 CustomMenu 组件：

<CustomMenu :menuItems="[{ label: '首页' }, { label: '产品' }, { label: '关于我们' }]" :activeIndex="1" />

通过这样的封装，我们可以在不同的页面中轻松复用这个导航菜单组件，并且只需要传递相应的菜单数据和激活索引即可。

这种封装方式不仅使代码结构更加清晰，也方便了后续对菜单功能的扩展和维护。例如，可以添加菜单点击事件处理、动态加载菜单数据等功能。

希望这个封装实例代码能够对您在 Vue3 项目中使用 Element 导航菜单有所帮助，让您的开发工作更加高效和便捷。