第一步:了解大概
1. element NavMenu组件共分为四个部分,分别是el-menu,el-submenu,el-menu-item-group和el-menu-item四个子组件配合使用完成菜单功能。
el-menu: 作为组件的整个容器,可在其配置组件全局参数。
el-submenu: 作为子菜单的容器和父菜单的子项,具有title和下拉子项的插槽。
el-menu-item-group: 作为需要分组的el-menu-item的容器,可设置标题。
el-menu-item: 菜单的具体选项。可作为el-menu,el-submenu,el-menu-item-group三者的子项。
2. element NavMenu组件有两种模式。一种是horizontal,用于顶部导航。一种为vertical,用于侧边导航。其中vertical还有一种collapse模式。具体表现为:
horizontal: vertical(collapse): vertical(!collapse):
第二步: 准备工作
1. 对外部插件大概功能和用法了解,Menu主要使用了popper: 一款js定位的引擎,用于子项弹出时弹窗的定位。
工具包文件夹中 vue-popper.js 为popper的一种基于vue对象的封装,方便之后混入vue实例中。