fix(ImageViewer): 修复预览图片点击右键后失焦跟随鼠标移动的问题 (#6098)

* fix(ImageViewer): 修复预览图片上右键后失焦跟随鼠标移动的问题

* fix(ImageViewer): update mousedown event logic

* Update packages/components/image-viewer/hooks/index.ts

触摸事件没有button属性，会正常处理

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* revert(image-viewer): revert copilot commit

revert copilot commit

* chore: stash changelog [ci skip]

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: 3 people

packages/components/image-viewer/hooks/index.ts

@@ -12,6 +12,9 @@ export function useDrag(initTransform: InitTransform) {
   const transform = ref(initTransform);
 
   const mouseDownHandler = (e: MouseEvent) => {
+    // only move by left mouse click
+    if ('button' in e && e.button !== 0) return;
+
     const { pageX: startX, pageY: startY } = e;
     const { translateX, translateY } = transform.value;
     const mouseMoveHandler = (e: MouseEvent) => {
@@ -21,13 +24,19 @@ export function useDrag(initTransform: InitTransform) {
         translateY: translateY + pageY - startY,
       };
     };
-    const mouseUpHandler = () => {
+
+    const removeHandler = () => {
       document.removeEventListener('mousemove', mouseMoveHandler);
       document.removeEventListener('mouseup', mouseUpHandler);
+      document.removeEventListener('mouseleave', mouseLeaveHandler);
     };
 
+    const mouseUpHandler = () => removeHandler();
+    const mouseLeaveHandler = () => removeHandler();
+
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
+    document.addEventListener('mouseleave', mouseLeaveHandler);
   };
 
   const resetTransform = () => {

packages/tdesign-vue-next/.changelog/pr-6098.md

@@ -0,0 +1,6 @@
+---
+pr_number: 6098
+contributor: mikasayw
+---
+
+- fix(ImageViewer): 修复预览图片时点击右键后失焦，预览图会跟随鼠标移动的问题 @mikasayw ([#6098](https://github.com/Tencent/tdesign-vue-next/pull/6098))