Эх сурвалжийг харах

fix: 修正事件重复添加的问题

WANGKANG 8 сар өмнө
parent
commit
a94bea7d92

+ 14 - 10
src/views/demo/components/ViewLog.vue

@@ -31,6 +31,7 @@ const intervalLog = ref()
 const scrollbarRef = ref()
 const scrollbarRef = ref()
 const innerRef = ref()
 const innerRef = ref()
 const isAutoScroll = ref(true)
 const isAutoScroll = ref(true)
+const listenerMouse = ref()
 
 
 const getLog = async () => {
 const getLog = async () => {
   try {
   try {
@@ -61,23 +62,26 @@ const handleOpen = id => {
   }, logRefreshTime.value)
   }, logRefreshTime.value)
 
 
   nextTick(function () {
   nextTick(function () {
-    console.log('1111')
     const elementScrollbar: any = document.getElementById('scrollbarRef1')
     const elementScrollbar: any = document.getElementById('scrollbarRef1')
-    elementScrollbar.addEventListener('wheel', function (event) {
-      console.log(event)
-      // event.preventDefault()
-      if (event.deltaY < 0) {
-        console.log('检测到向上滚轮,停止自动滚动')
-        isAutoScroll.value = false
-      }
-    })
+    listenerMouse.value = elementScrollbar.addEventListener('wheel', eventWheel)
   })
   })
 }
 }
+
+const eventWheel = event => {
+  console.log(event)
+  // event.preventDefault()
+  if (event.deltaY < 0) {
+    // console.log('检测到向上滚轮,停止自动滚动')
+    isAutoScroll.value = false
+  }
+}
 const handleClose = () => {
 const handleClose = () => {
   logVisible.value = false
   logVisible.value = false
   if (intervalLog.value) {
   if (intervalLog.value) {
     clearInterval(intervalLog.value)
     clearInterval(intervalLog.value)
   }
   }
+  const elementScrollbar: any = document.getElementById('scrollbarRef1')
+  elementScrollbar.removeEventListener('wheel', eventWheel)
 }
 }
 
 
 const timer: any = ref()
 const timer: any = ref()
@@ -88,7 +92,7 @@ const scrollToBottom = () => {
   timer.value = setInterval(() => {
   timer.value = setInterval(() => {
     // 获取滚动容器
     // 获取滚动容器
     const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap')
     const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap')
-    console.log(container.scrollHeight, container.scrollTop, container.clientHeight)
+    // console.log(container.scrollHeight, container.scrollTop, container.clientHeight)
     // 判断是否已滚动到底部
     // 判断是否已滚动到底部
     if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {
     if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {
       // 滚动到顶部
       // 滚动到顶部