From 822ebc31ad69d4c73fbd35b53445158d925a4c18 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Mon, 20 Aug 2018 22:46:14 +0800
Subject: [PATCH] feat: add side drawer button

---
 src/components/layout/GlobalLayout.vue |  6 +++-
 src/components/menu/SiderMenu.vue      | 11 +++++--
 src/components/tool/Drawer.vue         | 45 ++++++++++++++++++++++----
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index 587ec80..0591366 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -51,7 +51,8 @@ export default {
     return {
       minHeight: minHeight + 'px',
       collapsed: false,
-      menuData: menuData
+      menuData: menuData,
+      showSetting: true
     }
   },
   computed: {
@@ -68,6 +69,9 @@ export default {
     },
     onMenuSelect () {
       this.toggleCollapse()
+    },
+    onSettingDrawerChange (val) {
+      this.showSetting = val
     }
   },
   beforeCreate () {
diff --git a/src/components/menu/SiderMenu.vue b/src/components/menu/SiderMenu.vue
index fb3e664..c22dd55 100644
--- a/src/components/menu/SiderMenu.vue
+++ b/src/components/menu/SiderMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider class="sider" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :class="['sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div class="logo">
       <router-link to="/dashboard/workplace">
         <img src="static/img/vue-antd-logo.png">
@@ -32,6 +32,11 @@ export default {
       required: true
     }
   },
+  computed: {
+    isMobile () {
+      return this.$store.state.setting.isMobile
+    }
+  },
   methods: {
     onSelect (obj) {
       this.$emit('menuSelect', obj)
@@ -41,9 +46,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .shadow{
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+  }
   .sider{
     z-index: 10;
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
     .logo{
       height: 64px;
       position: relative;
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index 56f4c8c..02270b7 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -1,15 +1,22 @@
 <template>
   <div >
     <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
-    <div :class="['drawer', openDrawer ? 'open' : 'close']">
-      <slot></slot>
+    <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
+      <div style="position: relative; height: 100%">
+        <slot></slot>
+      </div>
+      <div class="button" @click="handle">
+        <a-icon type="bars" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import AIcon from 'ant-design-vue/es/icon/icon'
 export default {
   name: 'Drawer',
+  components: {AIcon},
   props: {
     openDrawer: {
       type: Boolean,
@@ -28,6 +35,9 @@ export default {
     },
     close () {
       this.$emit('change', false)
+    },
+    handle () {
+      this.$emit('change', !this.openDrawer)
     }
   }
 }
@@ -53,14 +63,37 @@ export default {
     height: 100%;
     transition: all 0.5s;
     z-index: 100;
-    &.open{
-      left: 0;
+    &.left{
+      &.open{
+      }
+      &.close{
+        transform: translateX(-100%);
+      }
     }
-    &.close{
-      left: -100%;
+    &.right{
+      &.open{
+        right: 0;
+      }
+      &.close{
+        right: -100%;
+      }
     }
     .sider{
       height: 100%;
     }
   }
+  .button{
+    height: 40px;
+    width: 40px;
+    background-color: #fff;
+    border-radius: 0 5px 5px 0;
+    position: fixed;
+    left: 256px;
+    top: 200px;
+    z-index: 100;
+    font-size: 26px;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    line-height: 40px;
+  }
 </style>