抽离列表布局,导航栏,分页器

components.json

 {
-  "Layout": "./src/components/Layout",
+  "AppLayout": "./src/components/Layout",
+  "ListLayout": "./src/components/ListLayout",
+  "SidebarNav": "./src/components/Sidebar",
+  "MdPagination": "./src/components/Pagination",
   "SearchItem": "./src/components/SearchItem",
   "DatePicker": "./src/components/DatePicker",
   "DateRangePicker": "./src/components/DateRangePicker"

examples/App.vue

 <template>
   <div id="app">
     <app-layout>
+      <template slot="nav">
+        <sidebar-nav :routers="route" />
+      </template>
       <router-view></router-view>
     </app-layout>
   </div>
@@ -9,6 +12,15 @@
 <script>
 export default {
   name: "app",
+  created() {
+    console.log(this.route);
+  },
+  props: {
+    route: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     let dataList = [];
     for (let index = 0; index < 20; index++) {
@@ -27,14 +39,6 @@ export default {
         total: 123
       }
     };
-  },
-  methods: {
-    changePage(index) {
-      console.log(index);
-    },
-    changeSizeHandle(size) {
-      console.log(size);
-    }
   }
 };
 </script>

examples/Layout.vue

-<template>
-  <div class="app-wrapper">
-    <div class="topTitle">
-      <div class="com-logo">
-        <img src="../src/assets/images/logo.png" alt="logo" />
-      </div>
-      <h1 class="com-title">后台管理系统</h1>
-    </div>
-
-    <div class="body-container">
-      <div class="main-container"><slot></slot></div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import '../src/assets/styles/variables.scss';
-.app-wrapper {
-  .com-logo {
-    width: 80px;
-    height: 30px;
-  }
-  @media screen and (min-width: $bigScreenWidth) {
-    .com-logo {
-      width: 138px;
-      height: 44px;
-    }
-  }
-  .com-title {
-    flex: 1;
-    height: 24px;
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: normal;
-    color: #fff;
-    text-indent: 6px;
-  }
-}
-</style>
-
-<script>
-export default {
-  name: 'layout',
-
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar;
-    },
-  },
-};
-</script>

examples/containers/DatePicker.vue

 <template>
-  <div>
+  <list-layout>
     <div class="components-demo-wrap">
       <date-picker v-model="filters.dateTime" />
     </div>
     <div class="components-demo-wrap">
       <date-range-picker v-model="filters.dateRange" />
     </div>
-  </div>
+  </list-layout>
 </template>
 
 <script>

examples/containers/Home.vue

 <template>
-  <div>
+  <list-layout>
     <ul>
       <li>
         <router-link to="DatePicker">DatePicker Demo</router-link>
@@ -7,6 +7,9 @@
       <li>
         <router-link to="SearchItem">SearchItem Demo</router-link>
       </li>
+      <li>
+        <router-link to="Pagination">Pagination Demo</router-link>
+      </li>
     </ul>
-  </div>
+  </list-layout>
 </template>
\ No newline at end of file

examples/containers/NormalLayout.vue

+<template>
+  <router-view>
+  </router-view>
+</template>
\ No newline at end of file

examples/containers/Pagination.vue

+<template>
+  <list-layout>
+    <template slot="footer">
+      <md-pagination
+        :pagination="pagination"
+        :changePage="changePage"
+        :changeSizeHandle="changeSizeHandle"
+      />
+    </template>
+  </list-layout>
+</template>
+
+<script>
+export default {
+  name: "paginationPage",
+  data() {
+    return {
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 88815
+      }
+    };
+  },
+  methods: {
+    changePage(index) {
+      console.log(index);
+    },
+    changeSizeHandle(size) {
+      console.log(size);
+    }
+  }
+};
+</script>
+

examples/containers/SearchItem.vue

 <template>
-  <div>
-    <div class="components-demo-wrap">
+  <list-layout>
+    <template slot="filterItem">
       <search-item label="默认">
         <date-picker v-model="filters.dateTime" />
       </search-item>
@@ -10,8 +10,8 @@
       >
         <date-picker v-model="filters.dateTime" />
       </search-item>
-    </div>
-  </div>
+    </template>
+  </list-layout>
 </template>
 
 <script>

examples/main.js

 import Vue from 'vue';
 import App from './App.vue';
-import route from './route';
+import route, { routerMap } from './route';
 import rymUi from '../src/index';
 import 'normalize.css/normalize.css';
 
@@ -9,6 +9,6 @@ Vue.use(rymUi);
 Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App),
+  render: h => <App route={routerMap} />,
   router: route,
 }).$mount('#app');

examples/route.js

@@ -3,13 +3,46 @@ import Router from 'vue-router';
 import Home from './containers/Home.vue';
 import DatePicker from './containers/DatePicker.vue';
 import SearchItem from './containers/SearchItem.vue';
+import Pagination from './containers/Pagination.vue';
 
 Vue.use(Router);
 
-const routerMap = [
-  { path: '', component: Home },
-  { path: '/DatePicker', component: DatePicker },
-  { path: '/SearchItem', component: SearchItem },
+export const routerMap = [
+  { path: '/', name: 'Home', component: Home, meta: { title: '首页' } },
+  {
+    path: '/DatePicker',
+    name: 'DatePicker',
+    component: DatePicker,
+    meta: { title: '时间选择' },
+  },
+  {
+    path: '/layout',
+    name: 'layout',
+    meta: { title: '列表布局' },
+    component: { render: h => <router-view /> },
+    children: [
+      {
+        path: 'SearchItem',
+        name: 'SearchItem',
+        component: SearchItem,
+        meta: { title: '搜索栏' },
+      },
+    ],
+  },
+  {
+    path: '/baseCom',
+    name: 'baseCom',
+    component: { render: h => <router-view /> },
+    meta: { title: '基础组件' },
+    children: [
+      {
+        path: 'Pagination',
+        name: 'Pagination',
+        component: Pagination,
+        meta: { title: '分页器' },
+      },
+    ],
+  },
 ];
 
 export default new Router({

src/assets/styles/element-ui.scss

@@ -53,11 +53,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 .el-select {
   width: 100%;
 }
-.el-submenu .el-menu-item,
-.el-submenu__title {
-  height: 40px;
-  line-height: 40px;
-}
+
 .el-input__inner,
 .el-button {
   height: 22px;
@@ -72,11 +68,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   }
 }
 @media screen and (min-width: $bigScreenWidth) {
-  .el-submenu .el-menu-item,
-  .el-submenu__title {
-    height: 56px;
-    line-height: 56px;
-  }
   .el-input__inner,
   .el-button {
     height: 40px;

src/assets/styles/variables.scss

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

src/components/Layout/Layout.vue

@@ -12,7 +12,7 @@
 
     <div class="body-container">
       <div class="sidebar-container">
-        <slot name="sidebar"></slot>
+        <slot name="nav"></slot>
       </div>
       <div class="main-container">
         <slot></slot>
@@ -58,7 +58,6 @@ body,
     align-items: center;
     transition: height 0.28s;
     height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
-  }
     .com-logo {
       width: 80px;
       height: 30px;
@@ -79,6 +78,7 @@ body,
       color: #fff;
       text-indent: 6px;
     }
+  }
   .body-container {
     display: flex;
     height: calc(100vh - #{$topBar-height});
@@ -127,21 +127,76 @@ body,
       }
     }
   }
+  // 底部分页
+  .footer-wrap {
+    width: 100%;
+    height: $footer-height;
+    line-height: $footer-height;
+    background-color: #fff;
+    display: flex;
+    justify-content: flex-end;
+    .md-pagination {
+      font-size: 12px;
+      padding: 0;
+      padding-right: 12px;
+      .md-pager li {
+        line-height: $footer-height;
+      }
+    }
+    .footer-info {
+      text-indent: 20px;
+      flex: 1;
+      color: #666;
+      font-size: 12px;
+    }
+  }
+  .el-pagination span:not([class*="suffix"]),
+  .el-pagination button {
+    font-size: 12px;
+  }
 }
 @media screen and (min-width: $bigScreenWidth) {
   $sideBar-width: 132px;
   $topBar-height: 72px;
+  $footer-height: 48px;
   .app-wrapper {
     .topTitle {
       height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
-    }
       .com-logo {
         width: 138px;
         height: 44px;
       }
+    }
+    .body-container {
+      height: calc(100vh - #{$topBar-height});
+    }
     .sidebar-container {
       width: $sideBar-width;
     }
+    .main-container {
+      height: calc(100vh - #{$topBar-height});
+      .main-wrap {
+        .main-wrap-inner {
+          height: calc(100% - #{$footer-height});
+        }
+      }
+    }
+    .footer-wrap {
+      height: $footer-height;
+      line-height: $footer-height;
+      .md-pagination {
+        .md-pager li {
+          line-height: $footer-height;
+        }
+      }
+      .footer-info {
+        font-size: 14px;
+      }
+    }
+    .el-pagination span:not([class*="suffix"]),
+    .el-pagination button {
+      font-size: 14px;
+    }
   }
 }
 </style>

src/components/ListLayout/index.js

+import ListLayout from './ListLayout.vue';
+
+ListLayout.install = Vue => {
+  Vue.component(ListLayout.name, ListLayout);
+};
+
+export default ListLayout;

src/components/Pagination/index.js

-import Pagination from './Pagination.vue';
+import MdPagination from './paginationWrap';
 
-export default {
-  name: 'md-pagination',
-  props: {
-    pagination: {
-      type: Object,
-      default: {
-        pageNum: 1,
-        pageSize: 10,
-        total: 0,
-      },
-    },
-    changePage: Function,
-    changeSizeHandle: Function,
-  },
-  render(h) {
-    return (
-      <Pagination
-        class="md-pagination"
-        currentPage={this.pagination.pageNum}
-        pageSize={this.pagination.pageSize}
-        total={this.pagination.total}
-        onCurrent-change={this.changePage}
-        onSize-change={this.changeSizeHandle}
-      />
-    );
-  },
+MdPagination.install = Vue => {
+  Vue.component(MdPagination.name, MdPagination);
 };
+
+export default MdPagination;

src/components/Pagination/paginationWrap.js

+import Pagination from './Pagination.vue';
+
+export default {
+  name: 'md-pagination',
+  props: {
+    pagination: {
+      type: Object,
+      default: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+    },
+    changePage: Function,
+    changeSizeHandle: Function,
+  },
+  render(h) {
+    return (
+      <Pagination
+        class='md-pagination'
+        currentPage={this.pagination.pageNum}
+        pageSize={this.pagination.pageSize}
+        total={this.pagination.total}
+        onCurrent-change={this.changePage}
+        onSize-change={this.changeSizeHandle}
+      />
+    );
+  },
+};

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>
+</template>
+
+<script>
+import Vue from "vue";
+import SidebarItem from "./SidebarItem";
+import ScrollBar from "@/components/ScrollBar";
+import { Menu, MenuItem, Submenu } from "element-ui";
+// import { constantRouterMap } from "../../../../router/index.js";
+Vue.component(Menu.name, Menu);
+Vue.component(Submenu.name, Submenu);
+Vue.component(MenuItem.name, MenuItem);
+
+export default {
+  name: "sidebar-nav",
+  components: {
+    SidebarItem,
+    ScrollBar
+  },
+  props: {
+    routers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    $route(newRoute, oldRoute) {
+      if (newRoute.matched.length === 1 && oldRoute.matched.length > 1) {
+        this.$refs.menu.close(
+          oldRoute.matched[0].name || oldRoute.matched[0].path
+        );
+      }
+    }
+  },
+  computed: {
+    isCollapse() {
+      return this.$route.matched.length === 2;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/styles/variables.scss";
+.navbar {
+  transition: width 0.28s;
+  width: $sideBar-width;
+  height: 100%;
+  z-index: 1001;
+  overflow: hidden;
+  // background-image: linear-gradient(0deg, #2362f6, #6895fe);
+  a {
+    display: inline-block;
+    text-decoration: none;
+    width: 100%;
+  }
+  .svg-icon {
+    margin-right: 6px;
+  }
+  .img-icon {
+    width: 8px;
+    height: 8px;
+    margin-right: 6px;
+  }
+  .el-menu {
+    border: none;
+    width: 100%;
+  }
+  .hideSidebar {
+    .sidebar-container,
+    .sidebar-container .el-menu {
+      width: 40px;
+      // overflow: inherit;
+    }
+    .main-container {
+      margin-left: 40px;
+    }
+  }
+  .hideSidebar {
+    .submenu-title-noDropdown {
+      padding-left: 10px;
+      position: relative;
+      span {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        transition: opacity 3s cubic-bezier(0.55, 0, 0.1, 1);
+        opacity: 0;
+        display: inline-block;
+      }
+      &:hover {
+        span {
+          display: block;
+          border-radius: 3px;
+          z-index: 1002;
+          width: 140px;
+          height: 56px;
+          visibility: visible;
+          position: absolute;
+          right: -145px;
+          text-align: left;
+          text-indent: 20px;
+          top: 0px;
+          background-color: $subMenuBg !important;
+          opacity: 1;
+        }
+      }
+    }
+    .el-submenu {
+      & > .el-submenu__title {
+        padding-left: 10px !important;
+        & > span {
+          display: none;
+        }
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+      .nest-menu {
+        .el-submenu__icon-arrow {
+          display: block !important;
+        }
+        span {
+          display: inline-block !important;
+        }
+      }
+    }
+  }
+  .el-menu-item,
+  .el-submenu .el-menu-item,
+  .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 0 0 8px !important;
+    font-size: 12px;
+  }
+  .el-menu-item {
+    &:hover {
+      background-color: $menuHover !important;
+    }
+    &.is-active {
+      background-color: $menuHover !important;
+    }
+    .menu-arrow {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      border-right: 8px solid #004cff;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+    }
+    &.is-active .menu-arrow {
+      border-right-color: #eee;
+    }
+  }
+  .nest-menu .el-submenu > .el-submenu__title,
+  .el-submenu .el-menu-item {
+    background-color: $subMenuBg !important;
+    width: $sideBar-width;
+    min-width: $sideBar-width;
+    text-align: center;
+    &:hover {
+      background-color: $menuHover !important;
+    }
+    &.is-active {
+      background-color: $menuActions !important;
+    }
+  }
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 132px !important;
+  }
+  .el-submenu {
+    .el-submenu__icon-arrow {
+      right: 8px;
+      margin-top: -5px;
+    }
+    .el-submenu__title {
+      background-color: transparent !important;
+      position: relative;
+      display: flex;
+      align-items: center;
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: 2;
+        bottom: -5px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 5px;
+        background-image: linear-gradient(180deg, #1252e9, transparent);
+        transition: all 0.28s 0.28s;
+        opacity: 0;
+      }
+    }
+    .el-menu-item {
+      text-align: left;
+      text-indent: 20px;
+    }
+    &.is-opened {
+      .el-submenu__title {
+        color: #fff !important;
+        background-color: $subMenuBg !important;
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $bigScreenWidth) {
+  $sideBar-width: 132px;
+  .navbar {
+    width: $sideBar-width;
+    .img-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 6px;
+    }
+    .el-menu-item,
+    .el-submenu .el-menu-item,
+    .el-submenu__title {
+      height: 56px;
+      line-height: 56px;
+      padding: 0 0 0 12px !important;
+      font-size: 14px;
+    }
+    .el-menu-item {
+      .menu-arrow {
+        top: 18px;
+      }
+    }
+    .nest-menu .el-submenu > .el-submenu__title,
+    .el-submenu .el-menu-item {
+      width: $sideBar-width;
+      min-width: $sideBar-width;
+    }
+    .el-submenu {
+      .el-menu-item {
+        text-indent: 25px;
+      }
+    }
+  }
+}
+</style>
+

src/components/Sidebar/SidebarItem.vue

+<template>
+  <div class="menu-wrapper">
+    <template v-for="item in routes">
+      <el-submenu
+        v-if="!item.hidden&&item.children"
+        :index="item.name||item.path"
+        :key="item.name"
+      >
+        <template slot="title">
+          <img-icon
+            v-if="item.meta&&item.meta.icon"
+            :iconName="item.meta.icon"
+          ></img-icon>
+          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
+        </template>
+
+        <template v-for="child in item.children">
+          <template v-if="!child.hidden">
+            <sidebar-item
+              :is-nest="true"
+              class="nest-menu"
+              v-if="child.children&&child.children.length>0"
+              :routes="[child]"
+              :key="child.path"
+            ></sidebar-item>
+
+            <router-link
+              v-else
+              :to="item.path+'/'+child.path"
+              :key="child.name"
+            >
+              <el-menu-item :index="item.path+'/'+child.path">
+                <!-- <svg-icon
+                v-if="child.meta&&child.meta.icon"
+                :icon-class="child.meta.icon"
+              ></svg-icon> -->
+                <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
+                <span class="menu-arrow"></span>
+              </el-menu-item>
+            </router-link>
+          </template>
+        </template>
+      </el-submenu>
+      <router-link
+        v-else
+        :key="item.name"
+        :to="item.path"
+      >
+        <el-menu-item :index="item.path">
+          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
+          <span class="menu-arrow"></span>
+        </el-menu-item>
+      </router-link>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarItem",
+  props: {
+    routes: {
+      type: Array
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.menu-wrapper {
+  .el-submenu__title i {
+    color: #fff;
+    transform: rotate(-90deg);
+  }
+  .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+    transform: rotate(0deg);
+  }
+}
+</style>

src/components/Sidebar/index.js

+import Sidebar from './Sidebar.vue';
+
+Sidebar.install = Vue => {
+  Vue.component(Sidebar.name, Sidebar);
+};
+
+export default Sidebar;

src/index.js

-import Layout from './components/Layout/index';
+import AppLayout from './components/Layout/index';
+import ListLayout from './components/ListLayout/index';
+import SidebarNav from './components/Sidebar/index';
+import MdPagination from './components/Pagination/index';
 import SearchItem from './components/SearchItem/index';
 import DatePicker from './components/DatePicker/index';
 import DateRangePicker from './components/DateRangePicker/index';
@@ -6,9 +9,12 @@ import { Option } from 'element-ui';
 
 const install = Vue => {
   // Layout
-  Vue.component(Layout.name, Layout);
+  Vue.component(AppLayout.name, AppLayout);
+  Vue.component(ListLayout.name, ListLayout);
   Vue.component(SearchItem.name, SearchItem);
-
+  // 基础组件
+  Vue.component(SidebarNav.name, SidebarNav);
+  Vue.component(MdPagination.name, MdPagination);
   // Element-ui
   Vue.component(Option.name, Option);
   // input