Kaynağa Gözat

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

WANGKANG 8 ay önce
ebeveyn
işleme
a94bea7d92
1 değiştirilmiş dosya ile 14 ekleme ve 10 silme
  1. 14 10
      src/views/demo/components/ViewLog.vue

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

@@ -31,6 +31,7 @@ const intervalLog = ref()
 const scrollbarRef = ref()
 const innerRef = ref()
 const isAutoScroll = ref(true)
+const listenerMouse = ref()
 
 const getLog = async () => {
   try {
@@ -61,23 +62,26 @@ const handleOpen = id => {
   }, logRefreshTime.value)
 
   nextTick(function () {
-    console.log('1111')
     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 = () => {
   logVisible.value = false
   if (intervalLog.value) {
     clearInterval(intervalLog.value)
   }
+  const elementScrollbar: any = document.getElementById('scrollbarRef1')
+  elementScrollbar.removeEventListener('wheel', eventWheel)
 }
 
 const timer: any = ref()
@@ -88,7 +92,7 @@ const scrollToBottom = () => {
   timer.value = setInterval(() => {
     // 获取滚动容器
     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) {
       // 滚动到顶部