<template> <el-menu :default-active="$route.path" :router="true" text-color="#fff" background-color="#333333" active-text-color="#ffd04b" :unique-opened="true" :collapse="menuType" class="el-menu-vertical-demo"> <div class="menu-btn" @click="menuType = !menuType"> <i v-if="!menuType" class="iconfont icon-shouqi"></i> <i v-if="menuType" class="iconfont icon-zhankai"></i> </div> <el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index"> <template slot="title"> <i :class="'iconfont menu-icon '+data.icon"></i> <span>{{data.value}}</span> </template> <el-menu-item v-for="(item,i) in data.list" :index="item.path" :key="i" class="item">{{item.value}}</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { name: "leftMenu", data(){ return { menuList:this.$store.state.menuList, menuType:false } }, methods:{ changeMenuType:function(){ this.$store.state.menuType = !this.$store.state.menuType }, toPath:function (data) { this.$router.push({name:data.routerName}) if(this.$store.state.openedTab.indexOf(data) < 0){ this.$store.state.openedTab.push(data); } } }, } </script> <style scoped lang="less"> @import "../../util/public"; .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; } .el-menu{ background: @bg-b; color: white; overflow: auto; height: 100%; .menu-btn{ height: 35px; background: @bg-b-s; line-height: 35px; /*text-align: center;*/ i{ font-size: 26px; float: right; padding: 0 15px; } } .el-submenu{ .menu-icon{ color: white; font-size: 18px; position: relative; right: 5px; } .el-menu-item{ background: @main-font-color; } .template{ color: black; } } } </style>