package/layer/lib/layer-vue.es.js

@@ -1,4 +1,4 @@
-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";
+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";
 function _typeof$1(o) {
   "@babel/helpers - typeof";
   return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
@@ -625,9 +625,7 @@ function _objectSpread$3(e) {
   }
   return e;
 }
-var _hoisted_1$2 = {
-  class: "layui-layer-phimg"
-};
+var _hoisted_1$2 = ["onWheel"];
 var _hoisted_2$2 = ["src"];
 var _hoisted_3$2 = {
   key: 0,
@@ -697,8 +695,20 @@ var _sfc_main$2 = defineComponent(_objectSpread$3(_objectSpread$3({}, __default_
       });
       return res;
     });
+    var scale = ref(1);
+    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);
+    };
     return function(_ctx, _cache) {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("img", {
+      return openBlock(), createElementBlock("div", {
+        class: "layui-layer-phimg",
+        onWheel: withModifiers(handleWheel, ["prevent"]),
+        style: normalizeStyle({
+          transform: "scale(".concat(scale.value, ")")
+        })
+      }, [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:;",
@@ -733,7 +743,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)]);
+      }, 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);
     };
   }
 }));

package/layer/src/component/Photos.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="layui-layer-phimg">
+  <div
+    class="layui-layer-phimg"
+    @wheel.prevent="handleWheel"
+    :style="{ transform: `scale(${scale})` }"
+  >
     <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">
@@ -97,4 +101,14 @@ const ifSetThumb = computed(() => {
   });
   return res;
 });
+
+// 添加缩放比例的响应式变量
+const scale = ref(1);
+// 定义处理滚轮事件的方法
+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);
+};
 </script>

pnpm-lock.yaml

@@ -118,8 +118,8 @@ importers:
         specifier: ^1.0.9
         version: 1.1.0
       '@layui/layer-vue':
-        specifier: git+https://git.theluyuan.com/theluyuan/layui-layer.git
-        version: git+https://git.theluyuan.com/theluyuan/layui-layer.git#e35e9d8eb94e9cb2985b00830a3ed6cd20509127(vue@3.2.40)
+        specifier: workspace:*
+        version: link:../layer
       '@layui/layui-vue':
         specifier: 'file:'
         version: file:package/component(vue@3.2.40)
@@ -1099,14 +1099,6 @@ packages:
   '@layui/icons-vue@1.1.0':
     resolution: {integrity: sha512-ndc53qyUZSslUkO8ZHeBMh6i4gSTtAUqsPpKQZWML0JH6E/X3LIySe6LATeqEMmD7wWSnHJ+WBVGO4ij85Dk1g==}
 
-  '@layui/layer-vue@git+https://git.theluyuan.com/theluyuan/layui-layer.git#4148c78700b236c67e229fc7938e133d1490fb06':
-    resolution: {commit: 4148c78700b236c67e229fc7938e133d1490fb06, repo: https://git.theluyuan.com/theluyuan/layui-layer.git, type: git}
-    version: 1.4.7
-
-  '@layui/layer-vue@git+https://git.theluyuan.com/theluyuan/layui-layer.git#e35e9d8eb94e9cb2985b00830a3ed6cd20509127':
-    resolution: {commit: e35e9d8eb94e9cb2985b00830a3ed6cd20509127, repo: https://git.theluyuan.com/theluyuan/layui-layer.git, type: git}
-    version: 1.4.7
-
   '@layui/layui-vue@file:package/component':
     resolution: {directory: package/component, type: directory}
 
@@ -4561,25 +4553,11 @@ snapshots:
 
   '@layui/icons-vue@1.1.0': {}
 
-  '@layui/layer-vue@git+https://git.theluyuan.com/theluyuan/layui-layer.git#4148c78700b236c67e229fc7938e133d1490fb06(vue@3.2.40)':
-    dependencies:
-      '@layui/layer-vue': '@layui/layui-vue@file:package/component(vue@3.2.40)'
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
-  '@layui/layer-vue@git+https://git.theluyuan.com/theluyuan/layui-layer.git#e35e9d8eb94e9cb2985b00830a3ed6cd20509127(vue@3.2.40)':
-    dependencies:
-      '@layui/layer-vue': '@layui/layui-vue@file:package/component(vue@3.2.40)'
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@layui/layui-vue@file:package/component(vue@3.2.40)':
     dependencies:
       '@ctrl/tinycolor': 3.4.1
       '@layui/icons-vue': 1.1.0
-      '@layui/layer-vue': git+https://git.theluyuan.com/theluyuan/layui-layer.git#4148c78700b236c67e229fc7938e133d1490fb06(vue@3.2.40)
+      '@layui/layer-vue': link:package/layer
       '@umijs/ssr-darkreader': 4.9.45
       '@vueuse/core': 9.2.0(vue@3.2.40)
       async-validator: 4.1.1