From a6cdc43d699044409e06c78583a2337ccaa3b96e Mon Sep 17 00:00:00 2001
From: sinake <sinake1@qq.com>
Date: 星期三, 04 十一月 2026 14:41:27 +0800
Subject: [PATCH] 器官回款机构搜索
---
src/components/AttachmentPreviewPane/index.vue | 77 ++++++++++++++++++++++++++++++++++++--
1 files changed, 73 insertions(+), 4 deletions(-)
diff --git a/src/components/AttachmentPreviewPane/index.vue b/src/components/AttachmentPreviewPane/index.vue
index d832651..14f711d 100644
--- a/src/components/AttachmentPreviewPane/index.vue
+++ b/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;
--
Gitblit v1.9.3