fix(DarkToggle): 组件生命结束取消监听

IdeaLeap · Feb 11, 2023 · 8f0f3e8 · 8f0f3e8
1 parent 461b8cf
commit 8f0f3e8
Showing 1 changed file with 17 additions and 11 deletions.
diff --git a/frontend/components/Uno/DarkToggle.vue b/frontend/components/Uno/DarkToggle.vue
@@ -24,20 +24,26 @@ if (process.client) {
     setItem()
   }
 
+  onMounted(() => {
   // 上面操作只会在页面加载时才会生效，因此，需要给media添加事件监听器
-  media.addEventListener('change', (e) => {
-    if (e.matches)
-      setDark()
-    else
-      setLight()
-  })
+    media.addEventListener('change', (e) => {
+      if (e.matches)
+        setDark()
+      else
+        setLight()
+    })
 
-  window.addEventListener('storage', (e) => {
-    if (e.newValue === 'light')
-      setLight()
+    window.addEventListener('storage', (e) => {
+      if (e.newValue === 'light')
+        setLight()
 
-    else
-      setDark()
+      else
+        setDark()
+    })
+  })
+  onUnmounted(() => {
+    media.removeEventListener('change', (e) => {}, true)
+    window.removeEventListener('storage', (e) => {}, true)
   })
 }
 </script>