feat: add side drawer button

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>