chore: optimize the api of drawer components; :star2:

iczer

2020-07-09 44a99a29876cefcb397bc7b3b9c3195b8d671187

chore: optimize the api of drawer components; :star2:

 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 @@
  name: 'Drawer',
  data () {
    return {
      drawerWidth: 0
    }
  },
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    openDrawer: {
    visible: {
      type: Boolean,
      required: false,
      default: false
@@ -40,18 +43,6 @@
      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 @@
    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,14 +70,8 @@
    toggleCollapse () {
      this.collapsed = !this.collapsed
    },
    onDrawerChange (show) {
      this.collapsed = show
    },
    onMenuSelect () {
      this.toggleCollapse()
    },
    onSettingDrawerChange (val) {
      this.showSetting = val
    },
  },
  beforeCreate () {

 src/layouts/header/AdminHeader.vue

@@ -60,7 +60,6 @@
        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)