left menu

chuanyi_client/src/components/LeftMenu/index.vue

@@ -1,50 +1,101 @@
 <template>
   <el-row>
     <el-col>
-      <el-menu>
-        <el-submenu index="1" background-color="#545c64">
-          <template slot="title" >
-            <i class="icon-server"></i>
-            <span>192.168.223.166</span>
-          </template>
-          <el-submenu index="1-1">
-            <template slot="title"><i class="fa fa-circle mark"></i>通道</template>
-            <el-menu-item index="1-1-1">选项4-1</el-menu-item>
-          </el-submenu>
-          <el-submenu index="1-2">
-            <template slot="title"><i class="fa fa-circle mark"></i>配置</template>
-            <el-menu-item index="1-2-1">选项4-1</el-menu-item>
-            <el-menu-item index="1-2-2">选项4-2</el-menu-item>
-            <el-menu-item index="/404">选项4-3</el-menu-item>
-            <el-menu-item index="1-2-4">选项4-4</el-menu-item>
-          </el-submenu>
-          <el-submenu index="1-3">
-            <template slot="title"><i class="fa fa-circle mark"></i>运行</template>
-            <el-menu-item index="1-3-1">选项4-1</el-menu-item>
-          </el-submenu>
-          <el-submenu index="1-4">
-            <template slot="title"><i class="fa fa-circle mark"></i>数据源配置</template>
-            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
-          </el-submenu>
-          <el-submenu index="1-5">
-            <template slot="title"><i class="fa fa-circle mark"></i>报表</template>
-            <el-menu-item index="1-5-1">选项4-1</el-menu-item>
-          </el-submenu>
-        </el-submenu>
+      <el-menu router>
+        <!--        <el-submenu index="1" background-color="#545c64">-->
+        <!--          <template slot="title" >-->
+        <!--            <i class="icon-server"></i>-->
+        <!--            <span>192.168.223.166</span>-->
+        <!--          </template>-->
+        <!--          <el-submenu index="1-1">-->
+        <!--            <template slot="title"><i class="fa fa-circle mark"></i>通道</template>-->
+        <!--            <el-menu-item index="1-1-1">选项4-1</el-menu-item>-->
+        <!--          </el-submenu>-->
+        <!--          <el-submenu index="1-2">-->
+        <!--            <template slot="title"><i class="fa fa-circle mark"></i>配置</template>-->
+        <!--            <el-menu-item index="1-2-1">选项4-1</el-menu-item>-->
+        <!--            <el-menu-item index="1-2-2">选项4-2</el-menu-item>-->
+        <!--            <el-menu-item index="404">选项4-3</el-menu-item>-->
+        <!--            <el-menu-item index="401">选项4-4</el-menu-item>-->
+        <!--          </el-submenu>-->
+        <!--          <el-submenu index="1-3">-->
+        <!--            <template slot="title"><i class="fa fa-circle mark"></i>运行</template>-->
+        <!--            <el-menu-item index="1-3-1">选项4-1</el-menu-item>-->
+        <!--          </el-submenu>-->
+        <!--          <el-submenu index="1-4">-->
+        <!--            <template slot="title"><i class="fa fa-circle mark"></i>数据源配置</template>-->
+        <!--            <el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
+        <!--          </el-submenu>-->
+        <!--          <el-submenu index="1-5">-->
+        <!--            <template slot="title"><i class="fa fa-circle mark"></i>报表</template>-->
+        <!--            <el-menu-item index="1-5-1">选项4-1</el-menu-item>-->
+        <!--          </el-submenu>-->
+        <!--        </el-submenu>-->
+        <SidebarItem v-for="route in menuList" :key="route.id" :item="route"></SidebarItem>
       </el-menu>
     </el-col>
   </el-row>
 </template>
 
 <script>
+import SidebarItem from '@/components/SidebarItem'
+
 export default {
-  name: "LeftMenu"
+  name: "LeftMenu",
+  components: {
+    SidebarItem
+  },
+  data() {
+    return {
+      menuList: [
+        {
+          name: '192.168.223.166',
+          id: '1',
+          children: [
+            {id: '1-1', name: '通道'},
+            {id: '1-2', name: '配置'},
+            {id: '1-3', name: '运行'},
+            {id: '1-4', name: '数据源配置'},
+            {id: '1-5', name: '报表'}
+          ]
+        },
+        {
+          name: '182.68.1.90',
+          id: '2',
+          children: [
+            {id: '2-1', name: '通道'},
+            {
+              id: '2-2',
+              name: '配置',
+              children: [
+                {id: '2-2-1', name: '2-2-1'},
+                {id: '2-2-2', name: '2-2-2'},
+                {
+                  id: '2-2-3',
+                  name: '2-2-3',
+                  children: [
+                    {id: '2-2-3-1', name: '2-2-3-1'},
+                    {id: '2-2-3-2', name: '2-2-3-2'}
+                  ]
+                }
+              ]
+            },
+            {id: '2-3', name: '运行'},
+            {id: '2-4', name: '数据源配置'},
+            {id: '2-5', name: '报表'}
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .el-menu {
   background-color: transparent;
+  height: 100%;
+  overflow: auto;
 }
 
 .el-submenu__title {
@@ -69,7 +120,7 @@ export default {
 
 .el-menu-item {
   color: black;
-  min-width: auto!important;
+  min-width: auto !important;
 }
 
 .el-submenu__title {
@@ -101,15 +152,44 @@ export default {
   padding-right: 10px;
 }
 
-.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
+.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
   -webkit-transform: rotateZ(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotateZ(-90deg);
+  margin-top: -4px;
 }
 
-.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
+.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
   -webkit-transform: rotateZ(0deg);
   -ms-transform: rotate(0deg);
   transform: rotateZ(0deg);
+  margin-top: -4px;
+}
+
+
+/*webkit内核*/
+.scroll_content::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+/*o内核*/
+.scroll_content .-o-scrollbar {
+  -moz-appearance: none !important;
+  background: rgba(0, 255, 0, 0) !important;
+}
+
+/*IE10,IE11,IE12*/
+.scroll_content {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-content-zoom-limit-min: 100%;
+  -ms-content-zoom-limit-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  overflow: auto;
 }
 </style>

chuanyi_client/src/components/SidebarItem/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <template v-if="!item.children">
+      <el-menu-item :index="item.id">
+        {{ item.name }}
+      </el-menu-item>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="item.id" popper-append-to-body>
+      <template slot="title">
+        {{ item.name }}
+        <!-- <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> -->
+      </template>
+      <sidebar-item
+          v-for="child in item.children"
+          :key="child.id"
+          :item="child"
+          class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarItem",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+
+</style>

chuanyi_client/src/router/index.js

@@ -38,10 +38,8 @@ const routes = [
         children: [
             {
                 path: 'index',
-                component: () => import('@/views/home/index'),
-                name: 'Index',
-                meta: {title: '首页', icon: 'dashboard', affix: true}
-            }
+                component: () => import('@/views/home/index')
+            },
         ]
     }
 ]

chuanyi_client/src/views/index.vue

@@ -5,7 +5,7 @@
         <el-header class="header-menu">
           <header-menu></header-menu>
         </el-header>
-        <left-menu></left-menu>
+        <left-menu class="left-menu"></left-menu>
       </template>
       <template slot="paneR">
         <el-header class="header-main">
@@ -66,9 +66,13 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+$headerHeight: 60px;
+$footerHeight: 40px;
+
 .el-header {
   color: #333;
-  line-height: 60px;
+  height: $headerHeight!important;
+  line-height: $headerHeight;
 }
 
 .header-menu {
@@ -95,6 +99,12 @@ export default {
 
 .el-footer {
   padding: 0;
+  height: $footerHeight!important;
   background-color: #2c3e50;
 }
+
+.left-menu {
+  height: calc(100vh - $headerHeight - $footerHeight);
+  overflow: auto;
+}
 </style>