refactor: sider menu

src/components/layout/GlobalLayout.vue

@@ -1,25 +1,9 @@
 <template>
   <a-layout>
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
-      <a-layout-sider class="sider" width="256px" :trigger="null">
+      <sider-menu :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
-        <div class="logo">
-          <a href="/">
-            <img src="static/img/vue-antd-logo.png">
-            <h1>Vue Ant Pro</h1>
-          </a>
-        </div>
-        <i-menu :collapsed="true" :menuData="menuData" @select="onMenuSelect"/>
-      </a-layout-sider>
     </drawer>
-    <a-layout-sider v-else class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
+    <sider-menu v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
-      <div class="logo">
-        <a href="/">
-          <img src="static/img/vue-antd-logo.png">
-          <h1>Vue Ant Pro</h1>
-        </a>
-      </div>
-      <i-menu :collapsed="collapsed" :menuData="menuData" />
-    </a-layout-sider>
     <a-layout>
       <global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
       <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
@@ -39,6 +23,7 @@ import AIcon from 'ant-design-vue/es/icon/icon'
 import IMenu from '../menu/menu'
 import GlobalFooter from './GlobalFooter'
 import Drawer from '../tool/Drawer'
+import SiderMenu from '../menu/SiderMenu'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
@@ -51,6 +36,7 @@ let menuData = []
 export default {
   name: 'GlobalLayout',
   components: {
+    SiderMenu,
     Drawer,
     GlobalFooter,
     AIcon,
@@ -78,10 +64,9 @@ export default {
       this.collapsed = !this.collapsed
     },
     onDrawerChange (show) {
-      console.log(show)
       this.collapsed = show
     },
-    onMenuSelect (obj) {
+    onMenuSelect () {
       this.toggleCollapse()
     }
   },
@@ -92,31 +77,4 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .sider{
-    z-index: 10;
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    .logo{
-      height: 64px;
-      position: relative;
-      line-height: 64px;
-      padding-left: 24px;
-      -webkit-transition: all .3s;
-      transition: all .3s;
-      background: #002140;
-      overflow: hidden;
-      h1{
-        color: #fff;
-        font-size: 20px;
-        margin: 0 0 0 12px;
-        font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
-        font-weight: 600;
-        display: inline-block;
-      }
-      img{
-        width: 32px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-    }
-  }
 </style>

src/components/menu/SiderMenu.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-layout-sider class="sider" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+    <div class="logo">
+      <a href="/">
+        <img src="static/img/vue-antd-logo.png">
+        <h1>Vue Ant Pro</h1>
+      </a>
+    </div>
+    <i-menu :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
+  </a-layout-sider>
+</template>
+
+<script>
+import ALayoutSider from 'ant-design-vue/es/layout/Sider'
+import IMenu from './menu'
+export default {
+  name: 'SiderMenu',
+  components: {IMenu, ALayoutSider},
+  props: {
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menuData: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .sider{
+    z-index: 10;
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    .logo{
+      height: 64px;
+      position: relative;
+      line-height: 64px;
+      padding-left: 24px;
+      -webkit-transition: all .3s;
+      transition: all .3s;
+      background: #002140;
+      overflow: hidden;
+      h1{
+        color: #fff;
+        font-size: 20px;
+        margin: 0 0 0 12px;
+        font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
+        font-weight: 600;
+        display: inline-block;
+      }
+      img{
+        width: 32px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+</style>