element-ui 抽屜組件（el-drawer ） 二次封裝 增加resize拖曳改變寬度大小

<template>
  <div :id="`drawer_container_${id}`">
    <el-drawer :id="id+'_drawer'" :wrapperClosable="false" @close="onClose" v-if="isShowDraw" :visible.sync="isShowDraw" :direction="direction" :size="sizePercentLabel">
        <template slot="title">
           <slot name="title"></slot>
        </template>
        <div v-if="isIframe && isShowIframeModal" class="iframe-model"></div>
        <slot></slot>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'Drawer',
  data() {
    return {
      isShowDraw: this.isShow,
      sizePercentDraw: this.sizePercent,
      drawerElement: null,
      isEffectiveEdge: false,
      isMouseDown: false,
      isShowIframeModal: false
    }
  },
  computed: {
    sizePercentLabel() {
      return this.sizePercentDraw * 100 + '%'
    }
  },
  props: {
    id: {
      type: String,
      default: 'my'
    },
    sizePercent: {
      type: Number,
      default: .6
    },
    isShow: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    minSizePercent: {
      type: Number,
      default: .4
    },
    maxSizePercent: {
      type: Number,
      default: .99
    },
    isIframe: {  //內容裏如果包含iframe 需要單獨處理resize
      type: Boolean,
      default: false
    },
    moveEdge: {
      type: Number,
      default: 10
    },
  },
  watch: {
    isShow(value) {
      this.isShowDraw = value
      value ? this.bindEvents() : this.unbindEvents()
    }
  },
  beforeDestroy() {
    this.unbindEvents()
  },
  methods: {
    onClose() {
      this.isShowDraw = false
      this.$emit('update:isShow', false);
    },
    bindEvents() {
      const containerElement = document.getElementById(`drawer_container_${this.id}`)
      if (containerElement) {
        containerElement.addEventListener('mousemove', this.onMouseMove)
        containerElement.addEventListener('mousedown', this.onMouseDown)
        containerElement.addEventListener('mouseup', this.onMouseUp)
      }
    },
    unbindEvents() {
      const containerElement = document.getElementById(`drawer_container_${this.id}`)
      if (containerElement) {
        containerElement.removeEventListener('mousemove', this.onMouseMove)
        containerElement.removeEventListener('mousedown', this.onMouseDown)
        containerElement.removeEventListener('mouseup', this.onMouseUp)
      }
    },
    isMoveToEdge(clientX) { 
      this.drawerElement = document.getElementById(this.id + '_drawer')
      const { width } = this.drawerElement.getBoundingClientRect()
      //實際遮罩範圍寬度
      const modalWidth = width * (1 - this.sizePercentDraw)

      //3像素是邊緣範圍
      return clientX <= modalWidth + this.moveEdge && clientX >= modalWidth - this.moveEdge
    },
    onMouseMove({ clientX }) {
      if (this.isMouseDown) {
         //動態改變寬度
         const { width } = this.drawerElement.getBoundingClientRect()
         if (clientX < width) {
            const tempSizePercent = (width - clientX) / width
            if (tempSizePercent >= this.minSizePercent && tempSizePercent <= this.maxSizePercent) {
              this.sizePercentDraw = tempSizePercent.toFixed(2)
            }
         }
      }

      //處理鼠標移到到邊緣
      if (this.isMoveToEdge(clientX) || this.isMouseDown) {
        this.isEffectiveEdge = true
        this.drawerElement.style.cursor = 'e-resize'
      } else {
        this.isEffectiveEdge = false
        this.drawerElement.style.cursor = 'default'
      }
    },
    onMouseDown() {
      //處理鼠標移到到邊緣 然後按下
      if (this.isEffectiveEdge) {
         this.isMouseDown = true
      }

      //處理iframe 遮罩層
      this.isShowIframeModal = true
    },
    onMouseUp() {
      this.isMouseDown = false 
      this.isShowIframeModal = false
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe-model {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3000;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
}
</style>

 

倒過來看 please~~~