<template> <el-menu :default-active="$route.path" :router="true" :unique-opened="true" text-color="#fff" background-color="#333333" active-text-color="#ffd04b" :collapse="menuType" class="menu-refresh"> <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> <template v-for="(item,i) in data.list"> <el-menu-item v-if="!item.hidden" class="item" :index="item.path" :key="i">{{item.value}} </el-menu-item> </template> </el-submenu> </el-menu> </template> <script> export default { name: "leftMenu", data() { return { menuList: this.$store.state.menuList, menuType: false }; }, mounted() { // console.log(this.menuList); }, 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 lang="less"> @import "../../util/public"; .menu-refresh { &:not(.el-menu--collapse) { width: 200px; } &.el-menu { overflow-x: hidden; overflow-y: auto; overflow-y: scroll; box-sizing: border-box; height: 100%; background: @bg-b; color: white; &::-webkit-scrollbar { background-color: #333333; /* or add it to the track */ &:hover { &::-webkit-scrollbar-thumb { background-color: #999; } } } &::-webkit-scrollbar-thumb { background-clip: padding-box; border: solid 3px transparent; border-radius: 6px; background-color: #C1C1C1; } .menu-btn { width: 100%; 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>