删除预览

lib/layer-vue.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, unref, createCommentVNode, toDisplayString, normalizeClass, ref, watch, onMounted, nextTick, withModifiers, createElementVNode, Fragment, renderList, shallowRef, createTextVNode, createVNode, useSlots, inject, Transition, withCtx, createBlock, renderSlot, h, render, isVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, unref, createCommentVNode, toDisplayString, normalizeClass, ref, watch, onMounted, nextTick, createElementVNode, Fragment, renderList, shallowRef, createTextVNode, createVNode, useSlots, inject, Transition, withCtx, createBlock, renderSlot, h, render, isVNode } from "vue";
 function _typeof$1(o) {
   "@babel/helpers - typeof";
   return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
@@ -625,7 +625,9 @@ function _objectSpread$3(e) {
   }
   return e;
 }
-var _hoisted_1$2 = ["onWheel"];
+var _hoisted_1$2 = {
+  class: "layui-layer-phimg"
+};
 var _hoisted_2$2 = ["src"];
 var _hoisted_3$2 = {
   key: 0,
@@ -695,49 +697,8 @@ 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", {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("img", {
-        class: "layui-layer-phimg",
-        onWheel: withModifiers(handleWheel, ["prevent"]),
-        style: normalizeStyle({
-          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", {
         href: "javascript:;",
@@ -772,7 +733,7 @@ var _sfc_main$2 = defineComponent(_objectSpread$3(_objectSpread$3({}, __default_
         style: normalizeStyle({
           left: "calc(calc( calc(100% - ".concat(100 * __props.imgList.length, "px) / 2) + ").concat(index2.value * 100, "px)")
         })
-      }, null, 4)])) : (openBlock(), createElementBlock("span", _hoisted_8$1, [__props.imgList[index2.value].alt ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.imgList[index2.value].alt), 1)) : createCommentVNode("", true), __props.imgList.length > 1 ? (openBlock(), createElementBlock("em", _hoisted_10, toDisplayString(index2.value + 1) + " / " + toDisplayString(__props.imgList.length), 1)) : createCommentVNode("", true)]))], 4)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 44, _hoisted_1$2);
+      }, null, 4)])) : (openBlock(), createElementBlock("span", _hoisted_8$1, [__props.imgList[index2.value].alt ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.imgList[index2.value].alt), 1)) : createCommentVNode("", true), __props.imgList.length > 1 ? (openBlock(), createElementBlock("em", _hoisted_10, toDisplayString(index2.value + 1) + " / " + toDisplayString(__props.imgList.length), 1)) : createCommentVNode("", true)]))], 4)) : createCommentVNode("", true)])) : createCommentVNode("", true)]);
     };
   }
 }));

src/component/Photos.vue

@@ -1,13 +1,5 @@
 <template>
-  <div
+  <div class="layui-layer-phimg">
-    class="layui-layer-phimg"
-    @wheel.prevent="handleWheel"
-    :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">
       <span class="layui-layer-imguide" v-if="imgList.length > 1">
@@ -106,46 +98,5 @@ const ifSetThumb = computed(() => {
   return res;
 });
 
-// 添加缩放比例的响应式变量
-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;
-  const newScale = scale.value + delta;
-  // 限制缩放范围
-  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>