动态左侧列表完成

2019-09-15 20:24:56 +08:00
parent 36d0f9414b
commit c408911139
6 changed files with 163 additions and 8 deletions
@@ -0,0 +1,39 @@
+<template>
+  <component :is="menuComponent" :routerInfo="routerInfo">
+    <template v-if="routerInfo.children.length">
+      <AsideComponent :key="item.name" :routerInfo="item" v-for="item in routerInfo.children" />
+    </template>
+  </component>
+</template>
+
+<script>
+import MenuItem from './menuItem'
+import SubMenu from './submenu'
+
+export default {
+  name: 'AsideComponent',
+  computed:{
+      menuComponent(){
+          if(this.routerInfo.children.length){
+              return 'SubMenu'
+          }else{
+              return 'menuItem'
+          }
+      }
+  },
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  },
+  components: {
+    MenuItem,
+    SubMenu
+  }
+}
+</script>
+<style lang="scss">
+</style>
@@ -0,0 +1,19 @@
+<template>
+    <el-menu-item :index="routerInfo.name">{{routerInfo.meta.title}}</el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  },
+}
+</script>
+<style lang="scss">
+</style>
@@ -0,0 +1,25 @@
+<template>
+  <el-submenu :index="routerInfo.name">
+    <template slot="title">
+      <i class="el-icon-location"></i>
+      <span slot="title">{{routerInfo.meta.title}}</span>
+    </template>
+    <slot></slot>
+  </el-submenu>
+</template>
+
+<script>
+export default {
+  name: 'SubMenu',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>
@@ -0,0 +1,39 @@
+<template>
+  <el-menu
+  mode="vertical"
+    :collapse="isCollapse"
+    :default-active="active"
+    @select="selectMenuItem"
+    :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+  >
+  <AsideComponent :routerInfo="asyncRouters[0]"/>
+  </el-menu>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+import AsideComponent from '@/view/layout/aside/asideComponent'
+export default {
+  name: 'Aside',
+  data() {
+    return {
+      active: '',
+      isCollapse: true
+    }
+  },
+  methods: {
+    selectMenuItem(index) {
+      this.$router.push({name:index})
+    }
+  },
+  computed:{
+    ...mapGetters('router',['asyncRouters'])
+  },
+  components: {
+    AsideComponent
+  },
+  created() {
+    this.active = this.$route.name
+  }
+}
+</script>