修改菜单中图标组件

examples/route.js

@@ -4,6 +4,7 @@ import Home from './containers/Home.vue';
 import DatePicker from './containers/DatePicker.vue';
 import SearchItem from './containers/SearchItem.vue';
 import Pagination from './containers/Pagination.vue';
+import layoutIcon from '../src/assets/images/menu/home.png';
 
 Vue.use(Router);
 
@@ -25,7 +26,7 @@ export const routerMap = [
   {
     path: '/layout',
     name: 'layout',
-    meta: { title: '列表布局' },
+    meta: { title: '列表布局', icon: layoutIcon },
     component: { render: h => <router-view /> },
     children: [
       {

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/assets/styles/variables.scss

 // media min-width
 $bigScreenWidth: 1600px;
 //sidebar
-$sideBar-width: 132px;
+$sideBar-width: 112px;
 $menuBg: #477cfa;
 $subMenuBg: #306bf6;
 $menuHover: #1459fc;

src/components/ImgIcon/ImgIcon.vue

 <template>
   <div class="img-icon">
-    <img :src="`/static/menu/${iconName}.png`" />
+    <img :src="iconName" />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'img-icon',
+  name: "img-icon",
   props: {
     iconName: {
-      type: String,
-    },
-  },
+      type: String
+    }
+  }
 };
 </script>
 
@@ -20,5 +20,10 @@ export default {
   width: 20px;
   height: 20px;
   overflow: hidden;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/components/Layout/Layout.vue

@@ -11,9 +11,7 @@
     </div>
 
     <div class="body-container">
-      <div class="sidebar-container">
-        <slot name="nav"></slot>
-      </div>
+      <slot name="nav"></slot>
       <div class="main-container">
         <slot></slot>
       </div>
@@ -83,13 +81,6 @@ body,
     display: flex;
     height: calc(100vh - #{$topBar-height});
   }
-  .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBar-width;
-    height: 100%;
-    z-index: 1001;
-    overflow: hidden;
-  }
   // 主体区域
   .main-container {
     flex: 1;
@@ -99,10 +90,6 @@ body,
     transition: margin-left 0.28s;
     background-color: #eee;
     // main-container全局样式
-    .app-main {
-      width: calc(100vw - #{$sideBar-width});
-      height: calc(100vh - #{$topBar-height} - 30px);
-    }
     .main-wrap {
       width: 100%;
       height: 100%;
@@ -170,9 +157,6 @@ body,
     .body-container {
       height: calc(100vh - #{$topBar-height});
     }
-    .sidebar-container {
-      width: $sideBar-width;
-    }
     .main-container {
       height: calc(100vh - #{$topBar-height});
       .main-wrap {

src/components/Sidebar/Sidebar.vue

 <template>
-  <scroll-bar class="navbar">
-    <el-menu
-      mode="vertical"
-      :default-active="$route.path"
-      unique-opened
-      background-color="transparent"
-      text-color="#a9c2fb"
-      active-text-color="#fff"
-      ref="menu"
-    >
-      <sidebar-item :routes="routers"></sidebar-item>
-    </el-menu>
-  </scroll-bar>
+  <div class="sidebar-container">
+    <scroll-bar>
+      <el-menu
+        mode="vertical"
+        :default-active="$route.path"
+        unique-opened
+        background-color="transparent"
+        text-color="#a9c2fb"
+        active-text-color="#fff"
+        ref="menu"
+      >
+        <sidebar-item :routes="routers"></sidebar-item>
+      </el-menu>
+    </scroll-bar>
+  </div>
 </template>
 
 <script>
@@ -19,10 +21,12 @@ import Vue from "vue";
 import SidebarItem from "./SidebarItem";
 import ScrollBar from "@/components/ScrollBar";
 import { Menu, MenuItem, Submenu } from "element-ui";
+import ImgIcon from "../ImgIcon/ImgIcon";
 // import { constantRouterMap } from "../../../../router/index.js";
 Vue.component(Menu.name, Menu);
 Vue.component(Submenu.name, Submenu);
 Vue.component(MenuItem.name, MenuItem);
+Vue.component(ImgIcon.name, ImgIcon);
 
 export default {
   name: "sidebar-nav",
@@ -55,7 +59,7 @@ export default {
 
 <style lang="scss">
 @import "../../assets/styles/variables.scss";
-.navbar {
+.sidebar-container {
   transition: width 0.28s;
   width: $sideBar-width;
   height: 100%;
@@ -113,7 +117,6 @@ export default {
           position: absolute;
           right: -145px;
           text-align: left;
-          text-indent: 20px;
           top: 0px;
           background-color: $subMenuBg !important;
           opacity: 1;
@@ -149,6 +152,7 @@ export default {
     font-size: 12px;
   }
   .el-menu-item {
+    text-align: left;
     &:hover {
       background-color: $menuHover !important;
     }
@@ -209,7 +213,6 @@ export default {
     }
     .el-menu-item {
       text-align: left;
-      text-indent: 20px;
     }
     &.is-opened {
       .el-submenu__title {
@@ -225,7 +228,7 @@ export default {
 
 @media screen and (min-width: $bigScreenWidth) {
   $sideBar-width: 132px;
-  .navbar {
+  .sidebar-container {
     width: $sideBar-width;
     .img-icon {
       width: 16px;
@@ -250,11 +253,6 @@ export default {
       width: $sideBar-width;
       min-width: $sideBar-width;
     }
-    .el-submenu {
-      .el-menu-item {
-        text-indent: 25px;
-      }
-    }
   }
 }
 </style>