organfee

yxh

3 天以前 5743e533414c608a12f9323f17a7c86721c7f54c

 src/components/AttachmentPreviewPane/index.vue

@@ -45,10 +45,13 @@
        <img
          :src="file.url"
          class="attachment-preview-pane__image"
          :style="{
            transform: 'scale(' + scale + ') rotate(' + deg + 'deg)'
          }"
          :class="{ 'is-dragging': dragging }"
          :style="imageStyle"
          draggable="false"
          alt="图片预览"
          @mousedown="startDrag"
          @click="toggleZoom"
          @dragstart.prevent
        />
      </div>
      <iframe
@@ -76,10 +79,32 @@
  data() {
    return {
      scale: 1,
      deg: 0
      deg: 0,
      offsetX: 0,
      offsetY: 0,
      dragging: false,
      dragMoved: false,
      dragStartX: 0,
      dragStartY: 0,
      dragOriginX: 0,
      dragOriginY: 0
    };
  },
  computed: {
    imageStyle() {
      return {
        transform:
          "translate(" +
          this.offsetX +
          "px," +
          this.offsetY +
          "px) scale(" +
          this.scale +
          ") rotate(" +
          this.deg +
          "deg)"
      };
    },
    fileType() {
      if (!this.file) {
        return "other";
@@ -116,7 +141,45 @@
    reset() {
      this.scale = 1;
      this.deg = 0;
      this.offsetX = 0;
      this.offsetY = 0;
    },
    startDrag(e) {
      if (e.button !== 0) return;
      this.dragging = true;
      this.dragMoved = false;
      this.dragStartX = e.clientX;
      this.dragStartY = e.clientY;
      this.dragOriginX = this.offsetX;
      this.dragOriginY = this.offsetY;
      document.addEventListener("mousemove", this.onDragMove);
      document.addEventListener("mouseup", this.onDragEnd);
    },
    onDragMove(e) {
      if (!this.dragging) return;
      const dx = e.clientX - this.dragStartX;
      const dy = e.clientY - this.dragStartY;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
        this.dragMoved = true;
      }
      this.offsetX = this.dragOriginX + dx;
      this.offsetY = this.dragOriginY + dy;
    },
    onDragEnd() {
      this.dragging = false;
      document.removeEventListener("mousemove", this.onDragMove);
      document.removeEventListener("mouseup", this.onDragEnd);
    },
    toggleZoom() {
      if (this.dragMoved) {
        this.dragMoved = false;
        return;
      }
      this.scale = this.scale === 1 ? 1.5 : 1;
    }
  },
  beforeDestroy() {
    this.onDragEnd();
  }
};
</script>
@@ -156,6 +219,12 @@
  max-height: 100%;
  transition: transform 0.2s ease;
  transform-origin: center center;
  cursor: grab;
  user-select: none;
}
.attachment-preview-pane__image.is-dragging {
  cursor: grabbing;
  transition: none;
}
.attachment-preview-pane__pdf {
  flex: 1 1 auto;