✨ Feature(custom): optimize gallery page performance

ISSUES CLOSED: #225

src/renderer/utils/drag.ts

@@ -0,0 +1,23 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+function disableDrag(e: DragEvent) {
+  const dropzone = document.getElementById('upload-area')
+  if (dropzone === null || !dropzone.contains(<Node>e.target)) {
+    e.preventDefault()
+    e.dataTransfer!.effectAllowed = 'none'
+    e.dataTransfer!.dropEffect = 'none'
+  }
+}
+
+export function useDragEventListeners() {
+  onMounted(() => {
+    window.addEventListener('dragenter', disableDrag, false)
+    window.addEventListener('dragover', disableDrag)
+    window.addEventListener('drop', disableDrag)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener('dragenter', disableDrag, false)
+    window.removeEventListener('dragover', disableDrag)
+    window.removeEventListener('drop', disableDrag)
+  })
+}

src/renderer/utils/mixin.ts

@@ -1,30 +0,0 @@
-import { ComponentOptions } from 'vue'
-
-export const dragMixin: ComponentOptions = {
-  mounted() {
-    this.disableDragEvent()
-  },
-
-  methods: {
-    disableDragEvent() {
-      window.addEventListener('dragenter', this.disableDrag, false)
-      window.addEventListener('dragover', this.disableDrag)
-      window.addEventListener('drop', this.disableDrag)
-    },
-
-    disableDrag(e: DragEvent) {
-      const dropzone = document.getElementById('upload-area')
-      if (dropzone === null || !dropzone.contains(<Node>e.target)) {
-        e.preventDefault()
-        e.dataTransfer!.effectAllowed = 'none'
-        e.dataTransfer!.dropEffect = 'none'
-      }
-    }
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('dragenter', this.disableDrag, false)
-    window.removeEventListener('dragover', this.disableDrag)
-    window.removeEventListener('drop', this.disableDrag)
-  }
-}