element NavMenu组件解读

第一步:了解大概

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实例中。

猜你喜欢

转载自www.cnblogs.com/heshuaiblog/p/12184821.html