.

SideBar/README.md

@@ -0,0 +1,98 @@
+# 介绍
+
+这是一个是基于`element-UI`的导航菜单组件基础上，进行了二次封装的菜单组件，该组件以组件递归的方式，实现了可根据从后端接收到的`json`菜单数据，动态渲染多级菜单的功能。
+
+# 使用方法
+
+由于该组件是基于`element-UI`进行二次封装的，所以在使用该组件时请务必安装`element-UI`（[安装方式猛戳这里](http://element-cn.eleme.io/#/zh-CN/component/installation)），安装好`element-UI`后，只需将该组件文件夹`SideBar`导入到现有项目中即可使用。
+
+# 工作流程
+
+组件封装好之后，由父组件调用该组件，父组件先向后端发送请求获取菜单数据，然后将菜单数据传递给封装好的菜单组件，菜单组件通过解析数据，完成菜单渲染。
+
+# 使用示例
+
+
+
+```html
+<template>
+  <div id="app">
+    <Sidebar :menuList="menuList"/>
+  </div>
+</template>
+
+<script>
+import  Sidebar from './SideBar/SideBar.vue'
+export default {
+  name: 'app',
+  components: { Sidebar},
+  data() {
+    return {
+      menuList,
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
+
+```
+
+# 选项
+
+|   属性   |         描述         | 类型  | 是否必须 |
+| :------: | :------------------: | :---: | :------: |
+| menuList | 由后端返回的菜单数据 | Array |    是    |
+
+# 菜单数据格式示例
+
+```json
+{
+    "menus" : [
+          {
+            "path": "/func1",     //菜单项所对应的路由路径
+            "title": "功能1",     //菜单项名称
+            "children":[]        //是否有子菜单，若没有，则为[]
+          },
+          {
+            "path": "/func2",
+            "title": "功能2",
+            "children":[]
+          },
+          {
+            "path": "/func3",
+            "title": "功能3",
+            "children": [
+              {
+                "path": "/func31",
+                "title": "功能3-1",
+                "children":[]
+              },
+              {
+                "path": "/func32",
+                "title": "功能3-2",
+                "children":[]
+              },
+              {
+                "path": "/func33",
+                "title": "功能3-3",
+                "children":[]
+              },
+            ]
+          }
+    ]
+}
+```
+
+
+
+# 效果图
+
+![](https://raw.githubusercontent.com/wangjiachen199366/Vue-Components-Library/master/SideBar/%E6%95%88%E6%9E%9C%E5%9B%BE.gif)
+
+# 源代码
+
+完整代码请戳☞[Vue-Components-Library/SideBar](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/SideBar)
+

SideBar/SideBar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="sidebar-container">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        router
+        mode="vertical"
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409EFF">
+      <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu" />
+    </el-menu>
+  </el-scrollbar>
+  </div>
+</template>
+<script>
+
+import SidebarItem from './SidebarItem'
+
+export default {
+  name:'Sidebar',
+  components: { SidebarItem },
+  props:{
+    menuList: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .sidebar-container {
+    transition: width 0.28s;
+    width: 180px !important;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+ 
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .el-scrollbar {
+      height: 100%;
+    }
+    .scrollbar-wrapper {
+      overflow-x: hidden!important;
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+    .el-scrollbar__bar.is-vertical{
+      right: 0px;
+    }
+    .is-horizontal {
+      display: none;
+    }
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+    .is-active > .el-submenu__title{
+        color: #f4f4f5!important;
+    }
+  }
+</style>

SideBar/SidebarItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="item.children">
+    <template v-if="item.children.length == 0">
+        <el-menu-item :index="item.path">
+          <i class="el-icon-menu"></i>
+          {{item.title}}
+        </el-menu-item>
+    </template>
+
+    <el-submenu v-else :index="item.path">
+      <template slot="title" >
+        <i class="el-icon-menu"></i>
+        {{item.title}}
+      </template>
+
+      <template v-for="child in item.children">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :item="child"
+          :key="child.path"/>
+        <el-menu-item v-else :key="child.path" :index="child.path">
+          <i class="el-icon-location"></i>
+          {{child.title}}
+        </el-menu-item>
+      </template>
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SidebarItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>