element navmenu 的使用方法

element navmenu 是 Element UI 组件库中的一个导航菜单组件，它可以用于创建响应式的网页导航菜单。

使用 element navmenu 的方法如下：

1. 安装 Element UI：在项目中引入 Element UI 组件库，并按照官方文档进行安装和配置。

2. 导入 navmenu 组件：在需要使用的页面中，通过 import 语句导入 navmenu 组件。

3. 在模板中使用 navmenu 组件：在模板中使用 <el-menu> 标签包裹菜单内容，并设置菜单的样式和布局。

4. 配置菜单项：在 <el-menu> 中使用 <el-menu-item> 或 <el-submenu> 标签定义菜单项内容。

5. 设置菜单的属性和事件：通过配置 <el-menu> 的属性和事件，可以实现菜单的样式、布局和交互效果的设置。

例如，以下是一个使用 element navmenu 的示例代码：

<template>
  <div>
    <el-menu :default-active="activeItem" mode="horizontal">
      <el-menu-item index="1">菜单项1</el-menu-item>
      <el-menu-item index="2">菜单项2</el-menu-item>
      <el-submenu index="3">
        <template slot="title">子菜单</template>
        <el-menu-item index="3-1">子菜单项1</el-menu-item>
        <el-menu-item index="3-2">子菜单项2</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui';

export default {
  components: {
    'el-menu': ElMenu,
    'el-menu-item': ElMenuItem,
    'el-submenu': ElSubmenu
  },
  data() {
    return {
      activeItem: '1'
    };
  }
};
</script>

以上代码展示了一个水平布局的导航菜单，其中包含两个顶级菜单项和一个带有两个子菜单项的子菜单。通过设置 activeItem 属性，可以控制默认激活的菜单项。

通过以上步骤，可以使用 element navmenu 创建一个简单的导航菜单，并进行个性化的样式和交互效果设置。