feat(Photos): 添加图片拖拽功能以改善用户体验

为Photos组件添加了鼠标拖拽功能,用户可以通过拖拽来移动放大后的图片。同时,引入了偏移量变量和鼠标事件处理函数,确保拖拽行为平滑且响应迅速。
This commit is contained in:
2025-04-15 10:39:05 +08:00
parent e35e9d8eb9
commit 4148c78700
3 changed files with 72 additions and 6 deletions

View File

@@ -696,18 +696,47 @@ 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, ")")
})
transform: "scale(".concat(scale.value, ") translate(").concat(offsetX.value, "px, ").concat(offsetY.value, "px)")
}),
onMousedown: handleMouseDown,
onMousemove: handleMouseMove,
onMouseup: handleMouseUp,
onMouseleave: handleMouseUp
}, [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", {

File diff suppressed because one or more lines are too long