feat(上传): 添加图片缩放功能

为上传组件中的图片添加了缩放功能,用户可以通过鼠标滚轮调整图片的缩放比例,缩放范围限制在0.5到3倍之间。此功能提升了用户体验,方便用户查看图片细节。
This commit is contained in:
theluyuan 2025-04-15 10:09:16 +08:00
parent 596ab0f0d4
commit d5576061e3
3 changed files with 29 additions and 9 deletions

View File

@ -1,5 +1,5 @@
import { w as withInstall } from "../badge/index2.js";
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, getCurrentInstance, onUnmounted, withModifiers } 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, getCurrentInstance, onUnmounted } from "vue";
import { I as ImageCompressor } from "../_chunks/js-image-compressor/index.js";
import { t as templateRef } from "../_chunks/@vueuse/index.js";
import { _ as _sfc_main$9 } from "../button/index2.js";
@ -635,7 +635,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"
@ -704,10 +704,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
}, 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: __props.imgList[index2.value].src,
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) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long