1.0.1 • Published 3 years ago
e-side-menu v1.0.1
一个基于elementUI二次封装的侧边菜单栏组件
一、使用说明
1、安装
npm install e-side-menu
2、在main.js中引入
import sideMenu from "e-side-menu";
3、注入全局使用
Vue.use(sideMenu);
二、定义数据源
1、fullPath
参数可选填
const routers = [
{
path: "/welcome",
name: "welcome",
component: () => import ( /*webpackChunkName:"welcome"*/ "../views/Home/Welcome"),
meta: {
name: "首页",
icon: "",
fullPath: "/welcome" /*可选*/
}
},
{
path: "/manager",
name: "manager",
component: () =>
import ( /*webpackChunkName:"studentManager"*/ "../views/Home/manager"),
meta: {
name: "管理",
icon: "",
fullPath: "/manager" /*可选*/
},
children: [{
path: "dormitory",
name: "dormitory",
component:"xxxxxxxxxx",
meta: {
name: "宿舍",
icon: "",
fullPath: "/manager/dormitory" /*可选*/
}
},
]
}
]
三、嵌套在elementUI内使用
注意:数据源中如果没定义fullPath
的话请把router:true
属性加上并变成动态绑定
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
:router="true" /*!这里!*/
>
<elSubMenu :sideMenu="menuList"></elSubMenu> /*这是我们自己的组件*/
</el-menu>
四、选中菜单激活样式
想要动态选中激活样式请务必加上:default-active="$route.path"
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
:router="true"
:default-active="$route.path" /*!务必加上!*/
>
<elSubMenu :sideMenu="menuList"></elSubMenu>
</el-menu>