forked from github/dataease
refactor(数据大屏): 优化鼠标和Mac触控板方向探测逻辑,针对Mac触控板的内外伸缩可以直接控制大屏缩放,鼠标滚轮控制只Y轴方向
This commit is contained in:
parent
7913bed6e5
commit
5dae4c3c71
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user