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

删除预览

Browse Source
This commit is contained in:
theluyuan 2025-04-15 13:24:15 +08:00
parent 4148c78700
commit c4c42db0f3
3 changed files with 10 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
lib/layer-vue.es.js
View File

@ -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", {
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", {
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", {
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)]);
};
}
}));

6
lib/layer-vue.umd.js
View File

File diff suppressed because one or more lines are too long

51
src/component/Photos.vue
View File

@ -1,13 +1,5 @@
<template>
<div
class="layui-layer-phimg"
@wheel.prevent="handleWheel"
:style="{ transform: `scale(${scale}) translate(${offsetX}px, ${offsetY}px)` }"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
@mouseleave="handleMouseUp"
>
<div class="layui-layer-phimg">
<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>