refactor(数据大屏): 优化鼠标和Mac触控板方向探测逻辑,针对Mac触控板的内外伸缩可以直接控制大屏缩放,鼠标滚轮控制只Y轴方向

This commit is contained in:
wangjiahao 2024-04-19 10:59:53 +08:00
parent 7913bed6e5
commit 5dae4c3c71

View File

@ -63,33 +63,31 @@ const checkDialog = () => {
} }
const handleMouseWheel = e => { const handleMouseWheel = e => {
if (editMode.value === 'preview' || checkDialog()) { if (
editMode.value === 'preview' ||
checkDialog() ||
(Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0)
) {
return return
} }
let dvMain = document.getElementById('dv-main-center') if (e.ctrlKey) {
let dvMainLeftSlide = document.getElementById('dv-main-left-sidebar') if (e.deltaY > 0) {
let areaLeftWidth = dvMainLeftSlide.clientWidth //
let areaRight = dvMain.clientWidth + areaLeftWidth
if (areaLeftWidth < e.clientX && e.clientX < areaRight) {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail
if ((lastWheelNum === 240 && delta === 240) || delta > 240) {
//
scaleIncrease(3)
} else if ((lastWheelNum === -240 && delta === -240) || delta < -240) {
//
scaleDecrease(3) scaleDecrease(3)
}
if (delta >= 240 || delta <= -240) {
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
} }
lastWheelNum = delta if (e.deltaY < 0) {
//
scaleIncrease(3)
e.stopPropagation()
e.preventDefault()
}
} }
} }
onMounted(() => { onMounted(() => {
window.addEventListener('mousewheel', handleMouseWheel, { passive: false }) window.addEventListener('wheel', handleMouseWheel, { passive: false })
setTimeout(() => { setTimeout(() => {
scale.value = canvasStyleData.value.scale scale.value = canvasStyleData.value.scale
nextTick(() => { nextTick(() => {
@ -99,7 +97,7 @@ onMounted(() => {
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('mousewheel', handleMouseWheel) window.removeEventListener('wheel', handleMouseWheel)
}) })
</script> </script>
<template> <template>