feat(Photos): 添加图片拖拽功能以改善用户体验
为Photos组件添加了鼠标拖拽功能,用户可以通过拖拽来移动放大后的图片。同时,引入了偏移量变量和鼠标事件处理函数,确保拖拽行为平滑且响应迅速。
This commit is contained in:
@@ -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
Reference in New Issue
Block a user