ai成果图片添加鼠标拖动功能

src/views/demo/aiachievement/ShowImage.vue

@@ -15,8 +15,8 @@
         style="border-radius: 10px;"
         class="image-item"
         :src="`${value.image}`"
-        :img-props="{ loading: 'lazy' }" 
-         @click="openPreview(index)"
+        :img-props="{ loading: 'lazy' }"
+        @click="openPreview(index)"
       />
     </a-image-preview-group>
   </div>
@@ -24,8 +24,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, defineProps, defineExpose } from "vue";
-import { getAppEnvConfig } from '@/utils/env';
-const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
 const props = defineProps(['showInfoData'])
 
@@ -33,38 +31,77 @@ const scrollBox = ref<HTMLElement | null>(null);
 const previewVisible = ref(false)
 const currentIndex = ref(0)
 
-onMounted(() => {
+// 初始化滚动逻辑（无惯性）
+const initScroll = () => {
   const el = scrollBox.value;
   if (!el) return;
 
-  const SPEED = 1.2;
+  const SPEED = 3;
 
+  // ---- 滚轮横向滚动 ----
   const onWheel = (e: WheelEvent) => {
-    if (e.ctrlKey) return; // 保留触控板缩放
+    if (e.ctrlKey) return;
     const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
     if (!delta) return;
     e.preventDefault();
     const unit = e.deltaMode === 1 ? 16 : 1;
     el.scrollLeft += delta * unit * SPEED;
   };
-
   el.addEventListener("wheel", onWheel, { passive: false });
-  onBeforeUnmount(() => el.removeEventListener("wheel", onWheel));
-});
+
+  // ---- 鼠标拖拽 ----
+  let isDown = false;
+  let startX = 0;
+  let scrollLeft = 0;
+
+  const onMouseDown = (e: MouseEvent) => {
+    isDown = true;
+    startX = e.pageX - el.offsetLeft;
+    scrollLeft = el.scrollLeft;
+    el.style.cursor = "grabbing";
+    e.preventDefault();
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isDown) return;
+    const x = e.pageX - el.offsetLeft;
+    const walk = (x - startX);
+    el.scrollLeft = scrollLeft - walk;
+  };
+
+  const onMouseUp = () => {
+    isDown = false;
+    el.style.cursor = "grab";
+  };
+
+  el.addEventListener("mousedown", onMouseDown);
+  document.addEventListener("mousemove", onMouseMove); // 用 document 监听，避免间隙丢失事件
+  document.addEventListener("mouseup", onMouseUp);
+
+  onBeforeUnmount(() => {
+    el.removeEventListener("wheel", onWheel);
+    el.removeEventListener("mousedown", onMouseDown);
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  });
+};
+
+onMounted(initScroll);
 
 // 点击某一张图片
-const openPreview = (index) => {
-  console.log("点击了第", index, "张图片")
+const openPreview = (index: number) => {
   currentIndex.value = index
   previewVisible.value = true
 }
 
-// 关闭预览时
-const handleVisibleChange = (val) => {
+// 关闭预览
+const handleVisibleChange = (val: boolean) => {
   previewVisible.value = val
 }
+
 defineExpose({
-  openPreview
+  openPreview,
+  scrollBox
 })
 </script>
 
@@ -79,42 +116,41 @@ defineExpose({
   background: #0D0E15;
   backdrop-filter: blur(3px);
 
-  /* 核心：横向滚动 */
   display: flex;
-  // overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   gap: 22px;
 
-  overscroll-behavior: contain;   /* 避免滚到边时带动页面 */
+  overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
 
+  cursor: grab;
+  user-select: none;
+
   :deep(.ant-image) {
-    flex: 0 0 auto;  /* 不允许收缩换行 */
+    flex: 0 0 auto;
     border-radius: 10px;
   }
 }
 .show-image-div::-webkit-scrollbar {
-  height: 12px; /* 横向滚动条高度 */
+  height: 12px;
 }
-
 .show-image-div::-webkit-scrollbar-track {
-  background: transparent; /* 滚动条轨道背景 */
+  background: transparent;
 }
-
 .show-image-div::-webkit-scrollbar-thumb {
-  background-color: rgb(255, 255, 255); /* 滚动条颜色 */
+  background-color: rgb(255, 255, 255);
   border-radius: 4px;
 }
-
 .show-image-div::-webkit-scrollbar-thumb:hover {
   background-color: rgb(255, 255, 255);
 }
-
 .image-item {
   border-radius: 10px;
   object-fit: cover;
   overflow: hidden;
+  user-drag: none;
+  -webkit-user-drag: none;
 }
 </style>