1.背景

项目基于Vue+Element-UI，新接到的需求是点击按钮能够从右侧弹出一个页面，并能控制该弹出页面的宽度。在Element-UI中有一个抽屉(Drawer)组件，支持点击从浏览器侧边弹出，但不能实现宽度的调整，于是自己想到实现一个通用的Resize组件，以后如果要使用时，可以直接引入。

2.具体实现

<template>
  <div
    :class="`resizer-${position}`"
    :style="{
      width: width,
      height: height,
      position: 'absolute',
      right: right,
      left: left,
      top: top,
      bottom: bottom,
      cursor: cursor,
    }"
    :id="uuid"
  />
</template>

<script>
// 定义每个方位的边框样式
const directionMap = {
  top: {
    width: '100%',
    height: '5px',
    top: 0,
    right: 'unset',
    bottom: 'unset',
    left: 0,
    cursor: 'ns-resize',
  },
  right: {
    width: '5px',
    height: '100%',
    top: 0,
    right: 0,
    bottom: 'unset',
    left: 'unset',
    cursor: 'ew-resize',
  },
  bottom: {
    width: '100%',
    height: '5px',
    top: 'unset',
    right: 'unset',
    bottom: 0,
    left: 0,
    cursor: 'ns-resize',
  },
  left: {
    width: '5px',
    height: '100%',
    top: 0,
    right: 'unset',
    bottom: 'unset',
    left: 0,
    cursor: 'ew-resize',
  },
  topLeft: {
    width: '12px',
    height: '12px',
    top: 0,
    right: 'unset',
    bottom: 'unset',
    left: 0,
    cursor: 'nw-resize',
  },
  topRight: {
    width: '12px',
    height: '12px',
    top: 0,
    right: 0,
    bottom: 'unset',
    left: 'unset',
    cursor: 'ne-resize',
  },
  bottomLeft: {
    width: '12px',
    height: '12px',
    top: 'unset',
    right: 'unset',
    bottom: 0,
    left: 0,
    cursor: 'sw-resize',
  },
  bottomRight: {
    width: '12px',
    height: '12px',
    top: 'unset',
    right: 0,
    bottom: 0,
    left: 'unset',
    cursor: 'se-resize',
  },
};
export default {
  props: {
    // 用于指定需要调整的节点
    target: {
      type: String,
    },
    // 用于指明组件是哪个方向的边框
    position: {
      type: String,
    },
    // 是否手动控制边框调整
    // 这里因为ElementUI的drawer通过size控制了宽度，需要手动计算size，也许是我不会用
    manual: {
      type: Boolean,
      default: false,
    },
    // 用于禁用某个方向的resize，防止组件自动调整宽度，影响布局
    disabledAxis: {
      type: String,
      default: '',
    },
  },
  computed: {
    isLeft() {
      return ['left', 'topLeft', 'bottomLeft'].includes(this.position);
    },
    isRight() {
      return ['right', 'topRight', 'bottomRight'].includes(this.position);
    },
    isAxisX() {
      return this.isLeft || this.isRight;
    },
    isTop() {
      return ['top', 'topLeft', 'topRight'].includes(this.position);
    },
    isBottom() {
      return ['bottom', 'bottomLeft', 'bottomRight'].includes(this.position);
    },
    isAxisY() {
      return this.isTop || this.isBottom;
    },
    isCorner() {
      return ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].includes(this.position);
    },
    enabledAxisX() {
      return !['x', 'all'].includes(this.disabledAxis);
    },
    enabledAxisY() {
      return !['y', 'all'].includes(this.disabledAxis);
    },
  },
  data() {
    return {
      ...directionMap[this.position],

      offset: {
        positionOnClickX: undefined,
        positionOnClickY: undefined,
      },
      targetDom: undefined,
      domData: {
        width: undefined,
        height: undefined,
        isPercentWidth: undefined,
        isPercentHeight: undefined,
      },
      modal: undefined,
      // 用于保证获取节点时，获取到的是组件内部的div
      uuid: this._.uniqueId('drawer-resizer'),
    };
  },
  mounted() {
    this.modal = this.generateModal();
    this.resizer = document.querySelector(`#${this.uuid}`);
    this.targetDom = document.querySelector(this.target);
    this.addListener();
  },
  methods: {
    generateModal() {
      const modal = document.createElement('div');
      modal.style.width = '100vw';
      modal.style.height = '100vh';
      modal.style.position = 'fixed';
      modal.style.top = '0';
      modal.style.left = '0';
      modal.style.cursor = this.cursor;
      modal.style['z-index'] = 9998;
      return modal;
    },
    mouseMoveHanlder(e) {
      this.calculateOffset(e);
    },
    mouseDownHanlder(e) {
      this.offset.positionOnClickX = e.clientX;
      this.offset.positionOnClickY = e.clientY;
      if (this.targetDom) {
        this.domData.width = this.targetDom.style.width.replace(/%|px/g, '');
        this.domData.height = this.targetDom.style.height.replace(/%|px/g, '');
      }
      this.resizer.style['z-index'] = 9999;
      this.modal.addEventListener('mousemove', this.mouseMoveHanlder);
      document.body.appendChild(this.modal);
    },
    mouseUpHanlder(e) {
      this.calculateOffset(e);
      this.resizer.style['z-index'] = undefined;
      this.offset = {
        positionOnClickX: undefined,
        positionOnClickY: undefined,
      };
      this.modal.removeEventListener('mousemove', this.mouseMoveHanlder);
      document.body.removeChild(this.modal);
    },
    calculateOffset(e) {
      const {
        positionOnClickX,
        positionOnClickY,
      } = this.offset;

      // 处理X轴
      // 当前鼠标的坐标
      const coordX = e.clientX;
      // 浏览器的宽度
      const windowWidth = window.innerWidth;
      let offsetX;
      // 鼠标移动的距离
      offsetX = positionOnClickX - coordX;
      // 向右移动鼠标，offsetX为负值，处理右边框的resize时，应取反
      if (this.isRight) {
        offsetX = -offsetX;
      }
      // 鼠标移动的距离与浏览器宽度的百分比
      const offsetPercentX = (offsetX / windowWidth) * 100;
      // 当前鼠标相对浏览器最左侧的百分比
      let coordPercentX;
      coordPercentX = (coordX / windowWidth) * 100;
      if (this.isLeft) {
        coordPercentX = 100 - coordPercentX;
      }


      let offsetY;
      let coordPercentY;
      const windowHeight = window.innerHeight;
      const coordY = e.clientY;
      offsetY = positionOnClickY - coordY;
      coordPercentY = (coordY / windowHeight) * 100;
      // 处理Y轴
      if (this.isBottom) {
        offsetY = -offsetY;
      }
      const offsetPercentY = (offsetY / windowHeight) * 100;

      const {
        position,
      } = this;

      const offset = {
        coordX,
        coordPercentX,
        offsetX,
        offsetPercentX,

        coordY,
        coordPercentY,
        offsetY,
        offsetPercentY,

        position,

      };
      if (this.target) {
        this.handlerDomStyle(offset);
      }
      if (this.manual) {
        this.$emit('offset', offset);
      }
    },
    handlerDomStyle(offset) {
      if (this.targetDom) {
        const {
          offsetX,
          offsetPercentX,
          offsetY,
          offsetPercentY,
        } = offset;
        const isPercentWidth = this.targetDom.style.width.includes('%');
        const isPercentHeight = this.targetDom.style.height.includes('%');
        const {
          width,
          height,
        } = this.domData;
        if (this.isAxisX && this.enabledAxisX) {
          if (isPercentWidth) {
            this.targetDom.style.width = `${Number(width) + Number(offsetPercentX)}%`;
          } else {
            this.targetDom.style.width = `${Number(width) + Number(offsetX)}px`;
          }
        }
        if (this.isAxisY && this.enabledAxisY) {
          if (isPercentHeight) {
            this.targetDom.style.height = `${Number(height) + Number(offsetPercentY)}%`;
          } else {
            this.targetDom.style.height = `${Number(height) + Number(offsetY)}px`;
          }
        }
      }
    },
    addListener() {
      if (this.resizer) {
        this.resizer.addEventListener('mousedown', this.mouseDownHanlder);
        this.modal.addEventListener('mouseup', this.mouseUpHanlder);
      }
    },
  },
};
</script>

3.改进思路

后来在npm上搜索了一下resize相关的包，发现可以将整个边框封入一个div中，直接做一个可以调整的div出来，也是一个不错的想法。另外，在target对象获取的时候，还可以使用$parent来获取父节点，这样是不是会减少dom获取带来的性能开销？还有组件销毁时，需要移除相应的事件。

一直在注重功能的实现，欠缺性能优化相关的知识点，如果你有好的意见，或发现其中的不足，还望指出。