From 1de2f9c881f1bdc67af1618ce0429c5984e98e53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Tue, 18 Jun 2024 21:22:02 +0800
Subject: [PATCH] fix(anchor): remove listeners when component destroyed

- Fixed some spelling mistakes in the code.
- Add unmounted method.
- Remove all listeners when unmounted.

Resolves: #120
---
 .../devui/anchor/src/d-anchor-box.ts          | 64 +++++++++----------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/packages/devui-vue/devui/anchor/src/d-anchor-box.ts b/packages/devui-vue/devui/anchor/src/d-anchor-box.ts
index 55e9acfd5a..becb0bcba9 100644
--- a/packages/devui-vue/devui/anchor/src/d-anchor-box.ts
+++ b/packages/devui-vue/devui/anchor/src/d-anchor-box.ts
@@ -1,12 +1,7 @@
 import { setActiveLink, onScroll } from './utils';
 import { inBrowser, randomId } from '../../shared/utils';
 
-const cssChange = (
-  mysidebar: HTMLElement,
-  postion: string,
-  top: number,
-  left: number
-) => {
+const cssChange = (mysidebar: HTMLElement, postion: string, top: number, left: number) => {
   mysidebar.style.position = postion;
   mysidebar.style.top = top + 'px';
   mysidebar.style.left = left + 'px';
@@ -20,6 +15,14 @@ const addEvent = (function () {
   }
 })();
 
+const removeEvent = (function () {
+  if (inBrowser && 'removeEventListener' in window) {
+    return function (elm: Element, type: string, handle: EventListenerOrEventListenerObject) {
+      elm.removeEventListener(type, handle, false);
+    };
+  }
+})();
+
 export default {
   name: 'DAnchorBox',
   // 滚动区域
@@ -31,12 +34,11 @@ export default {
     const classList = el.classList;
     classList.add('mycontainer', 'mymain', timeId);
     // 监听window
-    let windoScrollTop;
+    let windowScrollTop;
     const div = document.querySelector(`#${timeId}`) as HTMLElement;
 
-    const mysidebar = document.querySelector(
-      `#${timeId} .mysidebar`
-    ) as HTMLElement;
+    const mysidebar = document.querySelector(`#${timeId} .mysidebar`) as HTMLElement;
+    // 假设 this.sidebar 的类型为 HTMLElement
 
     const mysidebarHeight = mysidebar.clientHeight;
     window.addEventListener('resize', () => {
@@ -45,26 +47,16 @@ export default {
     window.onscroll = function () {
       // 为了保证兼容性，这里取两个值，哪个有值取哪一个
       // scrollTop就是触发滚轮事件时滚轮的高度
-      windoScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      windowScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       // 16为padding 8px *2 (上下边距)
       if (!document.getElementsByClassName('scrollTarget').length) {
-        if (windoScrollTop + mysidebarHeight - 16 >= div.offsetTop + div.clientHeight) {
+        if (windowScrollTop + mysidebarHeight - 16 >= div.offsetTop + div.clientHeight) {
           // 看不见 d-anchor-box区域
-          cssChange(
-            mysidebar,
-            'absolute',
-            div.clientHeight - mysidebarHeight - 8,
-            0
-          );
-        } else if (windoScrollTop > div.offsetTop) {
+          cssChange(mysidebar, 'absolute', div.clientHeight - mysidebarHeight - 8, 0);
+        } else if (windowScrollTop > div.offsetTop) {
           // 即将隐藏部分 box
-          cssChange(
-            mysidebar,
-            'fixed',
-            div.offsetTop,
-            div.getBoundingClientRect().left
-          );
-        } else if (div.offsetTop >= windoScrollTop && windoScrollTop >= 0) {
+          cssChange(mysidebar, 'fixed', div.offsetTop, div.getBoundingClientRect().left);
+        } else if (div.offsetTop >= windowScrollTop && windowScrollTop >= 0) {
           // 刚开始滚动
           cssChange(mysidebar, 'absolute', 0, 0);
         } else {
@@ -78,12 +70,7 @@ export default {
 
     addEvent?.(div, 'scroll', function () {
       if (document.getElementsByClassName('scrollTarget').length) {
-        cssChange(
-          mysidebar,
-          'fixed',
-          div.getBoundingClientRect().top,
-          div.getBoundingClientRect().left
-        );
+        cssChange(mysidebar, 'fixed', div.getBoundingClientRect().top, div.getBoundingClientRect().left);
       }
     });
 
@@ -93,5 +80,16 @@ export default {
       ? addEvent?.(div, 'scroll', onScroll)
       : window.addEventListener('scroll', onScroll);
   },
+  unmounted(el: HTMLElement): void {
+    const mysidebar = document.querySelector(`#${el.id} .mysidebar`) as HTMLElement;
+    window.removeEventListener('resize', () => {
+      cssChange(mysidebar, 'absolute', 0, 0);
+    });
+    window.onscroll = null;
+    removeEvent?.(el, 'scroll', onScroll);
+    document.getElementsByClassName('scrollTarget').length
+      ? removeEvent?.(el, 'scroll', onScroll)
+      : window.removeEventListener('scroll', onScroll);
+    el.remove();
+  },
 };
-