fix(Image): preview 增加拖拽样式 (#829)

WeBankFinTech · Jun 6, 2024 · 2661233 · 2661233
1 parent dd5381b
commit 2661233
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/components/image/preview.vue b/components/image/preview.vue
@@ -66,7 +66,7 @@
 
             <!-- canvas -->
             <img
-                :class="[`${prefixCls}__canvas`]"
+                :class="{ [`${prefixCls}__canvas`]: true, 'is-dragging': isDragging }"
                 :src="src"
                 :style="previewStyle"
                 @mousedown="handleMouseDown"
@@ -266,7 +266,7 @@ export default defineComponent({
             },
         );
 
-        const { handleMouseDown } = usePreviewImageDrag(transform);
+        const { isDragging, handleMouseDown } = usePreviewImageDrag(transform);
 
         const handleClose = () => {
             emit(CLOSE_EVENT);
@@ -289,6 +289,7 @@ export default defineComponent({
             handleActions,
             previewStyle,
             zIndex,
+            isDragging,
             handleMouseDown,
             getContainer,
         };

diff --git a/components/image/style/index.less b/components/image/style/index.less
@@ -101,6 +101,9 @@
     }
     &__canvas {
         user-select: none;
+        &.is-dragging {
+            cursor: move;
+        }
     }
     & &-download {
         width: 16px;

diff --git a/components/image/useDrag.ts b/components/image/useDrag.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import { type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 import { useEventListener } from '@vueuse/core';
 
@@ -9,7 +9,7 @@ const usePreviewImageDrag = (
         enableTransition: boolean;
     }>,
 ) => {
-    let isMouseDown = false;
+    const isDragging = ref(false);
 
     let startX: number;
     let startY: number;
@@ -19,7 +19,7 @@ const usePreviewImageDrag = (
     const handleMouseDown = (event: MouseEvent) => {
         // 取消默认图片拖拽的行为
         event.preventDefault();
-        isMouseDown = true;
+        isDragging.value = true;
         // 存储鼠标按下的偏移量和事件发生坐标
         const { offsetX, offsetY } = transform.value;
         startX = event.pageX;
@@ -40,20 +40,21 @@ const usePreviewImageDrag = (
 
     // mousemove 事件监听 document 拖拽效果更流畅
     useEventListener(document, 'mousemove', (event) => {
-        if (!isMouseDown) {
+        if (!isDragging.value) {
             return;
         }
         handleDrag(event);
     });
 
     useEventListener(document, 'mouseup', () => {
-        if (!isMouseDown) {
+        if (!isDragging.value) {
             return;
         }
-        isMouseDown = false;
+        isDragging.value = false;
     });
 
     return {
+        isDragging,
         handleMouseDown,
     };
 };