feat(Photos): 添加图片拖拽功能以改善用户体验

为Photos组件添加了鼠标拖拽功能，用户可以通过拖拽来移动放大后的图片。同时，引入了偏移量变量和鼠标事件处理函数，确保拖拽行为平滑且响应迅速。

lib/layer-vue.es.js

@@ -696,18 +696,47 @@ var _sfc_main$2 = defineComponent(_objectSpread$3(_objectSpread$3({}, __default_
       return res;
     });
     var scale = ref(1);
+    var offsetX = ref(0);
+    var offsetY = ref(0);
+    var isDragging = ref(false);
+    var startX = ref(0);
+    var startY = ref(0);
+    var initialOffsetX = ref(0);
+    var initialOffsetY = ref(0);
     var handleWheel = function handleWheel2(event) {
       var delta = event.deltaY > 0 ? -0.1 : 0.1;
       var newScale = scale.value + delta;
       scale.value = Math.min(Math.max(newScale, 0.5), 3);
     };
+    var handleMouseDown = function handleMouseDown2(event) {
+      isDragging.value = true;
+      startX.value = event.clientX;
+      startY.value = event.clientY;
+      initialOffsetX.value = offsetX.value;
+      initialOffsetY.value = offsetY.value;
+    };
+    var handleMouseMove = function handleMouseMove2(event) {
+      if (isDragging.value) {
+        var deltaX = event.clientX - startX.value;
+        var deltaY = event.clientY - startY.value;
+        offsetX.value = initialOffsetX.value + deltaX;
+        offsetY.value = initialOffsetY.value + deltaY;
+      }
+    };
+    var handleMouseUp = function handleMouseUp2() {
+      isDragging.value = false;
+    };
     return function(_ctx, _cache) {
       return openBlock(), createElementBlock("div", {
         class: "layui-layer-phimg",
         onWheel: withModifiers(handleWheel, ["prevent"]),
         style: normalizeStyle({
-          transform: "scale(".concat(scale.value, ")")
+          transform: "scale(".concat(scale.value, ") translate(").concat(offsetX.value, "px, ").concat(offsetY.value, "px)")
-        })
+        }),
+        onMousedown: handleMouseDown,
+        onMousemove: handleMouseMove,
+        onMouseup: handleMouseUp,
+        onMouseleave: handleMouseUp
       }, [createElementVNode("img", {
         src: __props.imgList[index2.value].src
       }, null, 8, _hoisted_2$2), __props.imgList.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [__props.imgList.length > 1 ? (openBlock(), createElementBlock("span", _hoisted_4$1, [createElementVNode("a", {

src/component/Photos.vue

@@ -2,7 +2,11 @@
   <div
     class="layui-layer-phimg"
     @wheel.prevent="handleWheel"
-    :style="{ transform: `scale(${scale})` }"
+    :style="{ transform: `scale(${scale}) translate(${offsetX}px, ${offsetY}px)` }"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseUp"
   >
     <img :src="imgList[index].src" />
     <div class="layui-layer-imgsee" v-if="imgList.length > 0">
@@ -104,6 +108,15 @@ const ifSetThumb = computed(() => {
 
 // 添加缩放比例的响应式变量
 const scale = ref(1);
+// 添加偏移量和鼠标按下状态的响应式变量
+const offsetX = ref(0);
+const offsetY = ref(0);
+const isDragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const initialOffsetX = ref(0);
+const initialOffsetY = ref(0);
+
 // 定义处理滚轮事件的方法
 const handleWheel = (event: WheelEvent) => {
   const delta = event.deltaY > 0 ? -0.1 : 0.1;
@@ -111,4 +124,28 @@ const handleWheel = (event: WheelEvent) => {
   // 限制缩放范围
   scale.value = Math.min(Math.max(newScale, 0.5), 3);
 };
+
+// 处理鼠标按下事件
+const handleMouseDown = (event: MouseEvent) => {
+  isDragging.value = true;
+  startX.value = event.clientX;
+  startY.value = event.clientY;
+  initialOffsetX.value = offsetX.value;
+  initialOffsetY.value = offsetY.value;
+};
+
+// 处理鼠标移动事件
+const handleMouseMove = (event: MouseEvent) => {
+  if (isDragging.value) {
+    const deltaX = event.clientX - startX.value;
+    const deltaY = event.clientY - startY.value;
+    offsetX.value = initialOffsetX.value + deltaX;
+    offsetY.value = initialOffsetY.value + deltaY;
+  }
+};
+
+// 处理鼠标释放事件
+const handleMouseUp = () => {
+  isDragging.value = false;
+};
 </script>