feat(Photos): 添加图片缩放功能并调整计算内容高度逻辑

在 Photos 组件中为图片添加了滚轮事件监听，支持图片缩放，并限制了缩放范围。同时调整了 calculateContent 函数中内容高度的计算逻辑，使其更符合实际需求。

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, createElementVNode, withModifiers, 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) {
@@ -628,7 +628,7 @@ function _objectSpread$3(e) {
 var _hoisted_1$2 = {
   class: "layui-layer-phimg"
 };
-var _hoisted_2$2 = ["src"];
+var _hoisted_2$2 = ["src", "onWheel"];
 var _hoisted_3$2 = {
   key: 0,
   class: "layui-layer-imgsee"
@@ -697,10 +697,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", {
-        src: __props.imgList[index2.value].src
+        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", {
+        onWheel: withModifiers(handleWheel, ["prevent"]),
+        style: normalizeStyle({
+          transform: "scale(".concat(scale.value, ")")
+        })
+      }, null, 44, _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:;",
         class: "layui-layer-iconext layui-layer-imgprev",
         onClick: _cache[0] || (_cache[0] = function($event) {
@@ -950,7 +960,7 @@ function calculateContent(title2, height, btn, type, isMessage) {
   if (btn && btn.length > 0) {
     if (type == 0) {
       if (title2) {
-        return "calc(" + height + " - 137px)";
+        return "calc(" + height + " - 90px)";
       } else {
         return "calc(" + height + " - 86px)";
       }

package.json

@@ -34,5 +34,8 @@
   ],
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.18.5"
+  },
+  "dependencies": {
+    "@layui/layer-vue": "file:"
   }
 }

src/component/Photos.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="layui-layer-phimg">
-    <img :src="imgList[index].src" />
+    <!-- 给 img 标签添加滚轮事件监听 -->
+    <img
+      :src="imgList[index].src"
+      @wheel.prevent="handleWheel"
+      :style="{ transform: `scale(${scale})` }"
+    />
     <div class="layui-layer-imgsee" v-if="imgList.length > 0">
       <span class="layui-layer-imguide" v-if="imgList.length > 1">
         <a
@@ -97,4 +102,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>

src/utils/index.ts

@@ -145,7 +145,7 @@ export function calculateContent(
   if (btn && btn.length > 0) {
     if (type == 0) {
       if (title) {
-        return "calc(" + height + " - 137px)";
+        return "calc(" + height + " - 90px)";
       } else {
         return "calc(" + height + " - 86px)";
       }