Skip to content

Commit

Permalink
fix(Image): preview 增加拖拽样式 (#829)
Browse files Browse the repository at this point in the history
  • Loading branch information
1zumii committed Jun 6, 2024
1 parent dd5381b commit 2661233
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 8 deletions.
5 changes: 3 additions & 2 deletions components/image/preview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
<!-- canvas -->
<img
:class="[`${prefixCls}__canvas`]"
:class="{ [`${prefixCls}__canvas`]: true, 'is-dragging': isDragging }"
:src="src"
:style="previewStyle"
@mousedown="handleMouseDown"
Expand Down Expand Up @@ -266,7 +266,7 @@ export default defineComponent({
},
);
const { handleMouseDown } = usePreviewImageDrag(transform);
const { isDragging, handleMouseDown } = usePreviewImageDrag(transform);
const handleClose = () => {
emit(CLOSE_EVENT);
Expand All @@ -289,6 +289,7 @@ export default defineComponent({
handleActions,
previewStyle,
zIndex,
isDragging,
handleMouseDown,
getContainer,
};
Expand Down
3 changes: 3 additions & 0 deletions components/image/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,9 @@
}
&__canvas {
user-select: none;
&.is-dragging {
cursor: move;
}
}
& &-download {
width: 16px;
Expand Down
13 changes: 7 additions & 6 deletions components/image/useDrag.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -9,7 +9,7 @@ const usePreviewImageDrag = (
enableTransition: boolean;
}>,
) => {
let isMouseDown = false;
const isDragging = ref(false);

let startX: number;
let startY: number;
Expand All @@ -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;
Expand All @@ -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,
};
};
Expand Down

0 comments on commit 2661233

Please sign in to comment.