写一个给组件添加拖拽缩放功能的组件

一. 前言

之前有写过一个低代码工具, 即通过拖拽组件生成一个页面. 现在产品又多了一个需求, 就是在预览时, 用户可以拖拽缩放来查看这个预览页面

此时再去修改低代码的渲染区显示太费功夫, 因为我想到直接写一个给组件添加拖拽缩放功能的组件, 然后包裹预览组件.

二. 实现

1. 缩放

缩放功能很简单, 监听鼠标滚轮事件即可

<template>
  <div
    class="drag-wrap"
    @mousewheel="handleMousewheel"
    :style="{
      transform: `scale(${transform.scale})`,
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        transform: {
          scale: 1,
        },
      };
    },
    methods: {
      handleMousewheel(ev) {
        const down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        let scale;
        if (down) {
          // 滚轮向下
          scale = this.transform.scale - 0.1;
        } else {
          // 滚轮向上
          scale = this.transform.scale + 0.1;
        }
        if (scale > 0.5 && scale < 4) {
          this.transform.scale = scale;
        }
        if (ev.preventDefault) {
          ev.preventDefault();
        }
        return false;
      },
    },
  };
</script>

<style lang="less" scoped>
  .drag-wrap {
    height: 100%;
  }
</style>

2. 拖拽

拖拽功能分为 3 部分:

• 按下鼠标, 开始准备拖拽

• 拖动鼠标, 组件跟随移动

• 松开鼠标, 拖拽结束, 所有状态重新初始化

<template>
  <div
    class="drag-wrap"
    @mousewheel="handleMousewheel"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
    @mouseleave="handleMouseleave"
    :style="{
      transform: `scale(${transform.scale}) translate(${transform.x}px, ${transform.y}px)`,
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
  /**
   * 鼠标按下的初始位置
   */
  let startPosition = {};
  // 是否开始拖动
  let isStart = false;
  export default {
    data() {
      return {
        transform: {
          x: 0,
          y: 0,
          scale: 1,
        },
      };
    },
    methods: {
      handleMousewheel(ev) {
        const down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        let scale;
        if (down) {
          // 滚轮向下
          scale = this.transform.scale - 0.1;
        } else {
          // 滚轮向上
          scale = this.transform.scale + 0.1;
        }
        if (scale > 0.5 && scale < 4) {
          this.transform.scale = scale;
        }
        if (ev.preventDefault) {
          ev.preventDefault();
        }
        return false;
      },
      handleMouseDown(event) {
        event.preventDefault();
        // 并记录当前位置
        startPosition = {
          clientX: event.clientX,
          clientY: event.clientY,
        };
        isStart = true;
      },
      handleMouseMove(event) {
        if (isStart) {
          const { clientX, clientY } = startPosition;
          // 获取鼠标的偏移量
          const offsetX = event.clientX - clientX;
          const offsetY = event.clientY - clientY;
          const { x, y, scale } = this.transform;
          this.transform = {
            x: x + offsetX,
            y: y + offsetY,
            scale,
          };
          startPosition = {
            clientX: event.clientX,
            clientY: event.clientY,
          };
        }
      },
      handleMouseUp(event) {
        isStart = false;
      },
      /**
       * 当鼠标先离开.drag-wrap然后再放开鼠标时, 依然可以恢复状态
       */
      handleMouseleave(event) {
        isStart = false;
      },
    },
  };
</script>

<style lang="less" scoped>
  .drag-wrap {
    height: 100%;
  }
</style>

三. 需要注意的点

1. 为什么使用 translate 而不是 position

由于相对定位是依赖上一层定位元素, 使用定位可能会导致其子元素依赖的定位元素变化, 而导致一些奇怪的问题

2. 为什么使用 scale 而不是 zoom

• zoom 会引起整个页面的重绘而 scale 缩放所占据的原始尺寸不变，只在当前元素进行重绘, 因此 scale 性能更好

• zoom 缩放中心是左上角而 scale 缩放中心可调整

• zoom 会受到最小字体大小为 12px 等限制