fix: 修复鼠标滚轮影响大屏画布放大问题

This commit is contained in:
wangjiahao 2023-10-30 11:02:10 +08:00
parent 6314e75397
commit f1cdab14f6
3 changed files with 22 additions and 14 deletions

View File

@ -42,20 +42,26 @@ const reposition = () => {
let lastWheelNum = 0 let lastWheelNum = 0
const handleMouseWheel = e => { const handleMouseWheel = e => {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail let dvMain = document.getElementById('dv-main-center')
if (lastWheelNum === 240 && delta === 240) { let dvMainLeftSlide = document.getElementById('dv-main-left-sidebar')
// let areaLeftWidth = dvMainLeftSlide.clientWidth
scaleIncrease(3) let areaRight = dvMain.clientWidth + areaLeftWidth
} else if (lastWheelNum === -240 && delta === -240) { if (areaLeftWidth < e.clientX && e.clientX < areaRight) {
// const delta = e.wheelDelta ? e.wheelDelta : -e.detail
scaleDecrease(3) if (lastWheelNum === 240 && delta === 240) {
} //
scaleIncrease(3)
} else if (lastWheelNum === -240 && delta === -240) {
//
scaleDecrease(3)
}
if (delta === 240 || delta === -240) { if (delta === 240 || delta === -240) {
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
}
lastWheelNum = delta
} }
lastWheelNum = delta
} }
onMounted(() => { onMounted(() => {

View File

@ -227,7 +227,7 @@ onMounted(() => {
}) })
</script> </script>
<template> <template>
<div class="mark-line"> <div class="mark-line" id="canvas-mark-line">
<div <div
v-for="line in lines" v-for="line in lines"
v-show="lineStatus[line] || false" v-show="lineStatus[line] || false"

View File

@ -236,14 +236,16 @@ eventBus.on('handleNew', handleNew)
:aside-position="'left'" :aside-position="'left'"
:side-name="'realTimeComponent'" :side-name="'realTimeComponent'"
class="left-sidebar" class="left-sidebar"
id="dv-main-left-sidebar"
:class="{ 'preview-aside': previewStatus }" :class="{ 'preview-aside': previewStatus }"
> >
<RealTimeComponentList /> <RealTimeComponentList />
</dv-sidebar> </dv-sidebar>
<!-- 中间画布 --> <!-- 中间画布 -->
<main class="center" ref="canvasCenterRef"> <main id="dv-main-center" class="center" ref="canvasCenterRef">
<el-scrollbar ref="canvasOut" class="content" :class="{ 'preview-content': previewStatus }"> <el-scrollbar ref="canvasOut" class="content" :class="{ 'preview-content': previewStatus }">
<div <div
id="canvas-dv-outer"
ref="canvasInner" ref="canvasInner"
:style="contentStyle" :style="contentStyle"
@drop="handleDrop" @drop="handleDrop"