SideBar.vue

<template>
	<el-aside class="ui-aside" :class="[isCollapse ? 'is-collapse': 'no-collapse']" :width="isCollapse ? '42px' : width" :style="{'height':height}">

		<!-- 主菜单 -->
		<poin-nav-menu class="ui-menu" ref="menu" v-bind="$attrs" mode="vertical" :is-poin4-menu-data="true" :collapse-transition="false" unique-opened :collapse="isCollapse" data-init="poin_initManage({'id':'getMenu','responseFields':{'menu':'#menuData','#menuData':{'name':'name','id':'id','icon':'icon','link':'link','resource':'resource','authorityScript':'routePath','state':'state','status':'status','index':'index','type':'type','menuType':'menuType','parentNodeId':'parentNodeId','disabled':'disabled'}},'requestFields':{}},'getMenuList')" v-on="$listeners"></poin-nav-menu>
		<div class="collapse-icon">
			<i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="toggleCollapse"></i>
		</div>
	</el-aside>
</template>
<script type="text/javascript">
import { Aside } from "element-ui";
import PoinNavMenu from "./SideMenu.js";

export default {
  name: "SideBar",
  //inheritAttrs:true,
  data() {
    return {
      width: "236px",
      height: "calc(100vh - 60px)",
      isCollapse: false
    };
  },
  components: {
    "poin-nav-menu": PoinNavMenu,
    "el-aside": Aside
  },
  mounted() {},
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
			this.$store.dispatch("setMenuCollapse", this.isCollapse);
			this.$emit("calc",this.isCollapse)
    }
  }
};
</script>

<style lang="less">
@menu-height: 42px;
.el-aside.ui-aside {
	margin: 0 8px;
	padding:4px;
	background:url('~@/assets/img/menubg.png') no-repeat;
	background-size:100% 100%;
	background-position: center bottom;
  border-right: none;
  border-radius: 12px;
  .ui-menu {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
  }
  .collapse-icon {
    margin: 0 14px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    border-top: 1px solid #c2c2c2;
    i {
      display: inline-block;
      padding: 10px;
    }
  }
  .el-menu {
    background: transparent;
  }
}
.el-submenu.ui-submenu {
  border: none;
  margin: 12px 0;
  &.is-opened {
    .el-submenu__title {
      color: var(--menu-text-color);
      background-color: transparent;
    }
  }
  &.is-active {
    > .el-submenu__title {
      color: var(--primary-color);
      background-color: transparent;
      i {
        color: var(--primary-color);
      }
    }
  }
  .el-submenu__title {
    padding-left: 12px;
    height: @menu-height;
    line-height: @menu-height;
    color: var(--menu-text-color);
    background-color: transparent;
    i {
      color: var(--menu-text-color);
    }
  }
  .el-menu-item {
    height: @menu-height;
    line-height: @menu-height;
    color: var(--submenu-text-color);
    &.is-active {
      color: var(--white);
      background: var(--primary-color);
      &:hover {
        background: var(--primary-color);
      }
    }
  }
}
.el-menu-item.ui-menu-item {
  margin: 6px 12px;
  width: calc(100% - 24px);
  height: @menu-height + 4px;
  line-height: @menu-height + 4px;
  color: var(--menu-text-color);
  border-bottom: none;
  border-radius: 4px;
  i {
    color: var(--menu-text-color);
  }
  &.is-active {
    color: var(--white) !important;
    background: var(--primary-color) !important;
    &:hover {
      background: var(--primary-color) !important;
    }
  }
  &:hover {
    background: rgba(#6653f2, 0.1);
  }
}
.is-collapse {
  .el-submenu {
    .el-submenu__title {
      padding-right: 5px;
      text-align: center;
    }
  }
  &.el-aside.ui-aside {
    .collapse-icon {
      margin: 0;
    }
  }
}
.el-menu--collapse {
	.el-submenu__title {
		padding-left: 6px!important;
	}
}
.el-menu-item:focus {
	background-color: transparent!important;
}
</style>