theluyuan/layui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
为上传组件中的图片添加了缩放功能，用户可以通过鼠标滚轮调整图片的缩放比例，缩放范围限制在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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
es/upload/index2.js
View File

@ -1,5 +1,5 @@
import { w as withInstall } from "../badge/index2.js"; 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 { I as ImageCompressor } from "../_chunks/js-image-compressor/index.js";
import { t as templateRef } from "../_chunks/@vueuse/index.js"; import { t as templateRef } from "../_chunks/@vueuse/index.js";
import { _ as _sfc_main$9 } from "../button/index2.js"; import { _ as _sfc_main$9 } from "../button/index2.js";
@ -635,7 +635,7 @@ function _objectSpread$3(e) {
var _hoisted_1$2 = { var _hoisted_1$2 = {
class: "layui-layer-phimg" class: "layui-layer-phimg"
}; };
var _hoisted_2$2 = ["src"]; var _hoisted_2$2 = ["src", "onWheel"];
var _hoisted_3$2 = { var _hoisted_3$2 = {
key: 0, key: 0,
class: "layui-layer-imgsee" class: "layui-layer-imgsee"
@ -704,10 +704,20 @@ var _sfc_main$2 = defineComponent(_objectSpread$3(_objectSpread$3({}, __default_
}); });
return res; 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 function(_ctx, _cache) {
return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("img", { 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:;", href: "javascript:;",
class: "layui-layer-iconext layui-layer-imgprev", class: "layui-layer-iconext layui-layer-imgprev",
onClick: _cache[0] || (_cache[0] = function($event) { onClick: _cache[0] || (_cache[0] = function($event) {

18
lib/index.js
View File

File diff suppressed because one or more lines are too long

2
umd/index.js
View File

File diff suppressed because one or more lines are too long