vue-draggable-resizable使用scale缩放后，修改元素大小后鼠标位置不对如何解决

当使用`vue-draggable-resizable`的`scale`属性对元素进行缩放时，元素的实际大小和在屏幕上的显示大小会有所不同，导致鼠标位置与实际元素大小不匹配的问题。解决这个问题可以通过调整鼠标位置。

具体来说，可以在元素缩放后重新计算鼠标在元素内部的相对位置，然后将其调整到正确的位置。这可以通过以下步骤来实现：

1. 获取当前元素的缩放比例和实际大小，可以通过`this.$refs`获取到当前元素的DOM对象，然后从DOM对象中获取缩放比例和实际大小。

   const scale = this.$refs.element.style.transform.match(/scale\(([^\)]+)\)/)[1];
   const scaleValue = parseFloat(scale.split(',')[0].substr(6));
   const actualWidth = this.$refs.element.offsetWidth / scaleValue;
   const actualHeight = this.$refs.element.offsetHeight / scaleValue;

2. 获取当前鼠标在元素内部的相对位置，可以通过`event.offsetX`和`event.offsetY`获取鼠标在元素内部的相对位置。

   const mouseX = event.offsetX;
   const mouseY = event.offsetY;

3. 根据缩放比例和实际大小，以及当前鼠标在元素内部的相对位置，计算出正确的鼠标位置。

   const correctX = mouseX / this.width * actualWidth;
   const correctY = mouseY / this.height * actualHeight;

4. 将鼠标位置更新为正确的位置。

   event.target.style.left = `${event.pageX - correctX}px`;
   event.target.style.top = `${event.pageY - correctY}px`;

完整的示例代码如下：

<template>
  <vue-draggable-resizable
    ref="element"
    :w="100"
    :h="100"
    :scale="scale"
    :onResizeStop="handleResizeStop"
  >
    <div class="box"></div>
  </vue-draggable-resizable>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
    };
  },
  methods: {
    handleResizeStop(event) {
      const scale = this.$refs.element.style.transform.match(/scale\(([^\)]+)\)/)[1];
      const scaleValue = parseFloat(scale.split(',')[0].substr(6));
      const actualWidth = this.$refs.element.offsetWidth / scaleValue;
      const actualHeight = this.$refs.element.offsetHeight / scaleValue;

      const mouseX = event.offsetX;
      const mouseY = event.offsetY;

      const correctX = mouseX / this.width * actualWidth;
      const correctY = mouseY / this.height * actualHeight;

      event.target.style.left = `${event.pageX - correctX}px`;
      event.target.style.top = `${event.pageY - correctY}px`;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: red;
}
</style>

需要注意的是，这种方法只适用于元素只进行了缩放的情