chore: optimize the api of drawer components; 🌟

src/components/tool/Drawer.vue

@@ -1,14 +1,14 @@
 <template>
   <div >
-    <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
-    <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
+    <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
+    <div :class="['drawer', placement, visible ? 'open' : 'close']">
       <div ref="drawer" class="content beauty-scroll">
         <slot></slot>
       </div>
-      <div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle">
+      <div v-if="showHandler" :class="['handler-container', placement, visible ? 'open' : 'close']" ref="handler" @click="toggle">
         <slot v-if="$slots.handler" name="handler"></slot>
         <div v-else class="handler">
-          <a-icon :type="openDrawer ? 'close'  : 'bars'" />
+          <a-icon :type="visible ? 'close'  : 'bars'" />
         </div>
       </div>
     </div>
@@ -20,11 +20,14 @@ export default {
   name: 'Drawer',
   data () {
     return {
-      drawerWidth: 0
     }
   },
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
   props: {
-    openDrawer: {
+    visible: {
       type: Boolean,
       required: false,
       default: false
@@ -40,18 +43,6 @@ export default {
       default: true
     }
   },
-  mounted () {
-    this.drawerWidth = this.getDrawerWidth()
-  },
-  watch: {
-    'drawerWidth': function () {
-      if (this.placement === 'left') {
-        //this.$refs.handler.style.left = val + 'px'
-      } else {
-        //this.$refs.handler.style.right = val + 'px'
-      }
-    }
-  },
   methods: {
     open () {
       this.$emit('change', true)
@@ -59,11 +50,8 @@ export default {
     close () {
       this.$emit('change', false)
     },
-    handle () {
-      this.$emit('change', !this.openDrawer)
-    },
-    getDrawerWidth () {
-      return this.$refs.drawer.clientWidth
+    toggle () {
+      this.$emit('change', !this.visible)
     }
   }
 }

src/layouts/AdminLayout.vue

@@ -1,10 +1,10 @@
 <template>
   <a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '']">
-    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
+    <drawer v-if="isMobile" v-model="collapsed">
       <side-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
     <side-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
-    <drawer v-if="!hideSetting" :open-drawer="showSetting" placement="right"  @change="onSettingDrawerChange">
+    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
       <div class="setting" slot="handler">
         <a-icon :type="showSetting ? 'close' : 'setting'"/>
       </div>
@@ -70,15 +70,9 @@ export default {
     toggleCollapse () {
       this.collapsed = !this.collapsed
     },
-    onDrawerChange (show) {
-      this.collapsed = show
-    },
     onMenuSelect () {
       this.toggleCollapse()
     },
-    onSettingDrawerChange (val) {
-      this.showSetting = val
-    },
   },
   beforeCreate () {
     menuData = this.$router.options.routes.find((item) => item.path === '/').children

src/layouts/header/AdminHeader.vue

@@ -60,7 +60,6 @@ export default {
         return 'light'
       }
       return this.theme
-      // return (this.layout == 'side' && !this.isMobile && this.theme != 'night') ? 'light' : this.theme
     },
     langAlias() {
       let lang = this.langList.find(item => item.key == this.lang)