From a46c511f1f7f99554536220dff7c00d7b13ab318 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Sun, 18 Jun 2023 22:31:35 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=96=B0=E5=A2=9EElScrollbarInstance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json                    |  1 +
 src/layout/components/IframeToggle/index.vue  |  2 +-
 src/layout/components/TagsView/ScrollPane.vue | 13 ++++++-------
 src/types/element.d.ts                        |  1 +
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 4dbaa2c..a6661b6 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -26,6 +26,7 @@
     "ElDatePickerInstance": true,
     "ElTimePickerInstance": true,
     "ElTimeSelectInstance": true,
+    "ElScrollbarInstance": true,
     "ElCascaderInstance": true,
     "ElColorPickerInstance": true,
     "ElRateInstance": true,
diff --git a/src/layout/components/IframeToggle/index.vue b/src/layout/components/IframeToggle/index.vue
index 1a24ba6..9ffae00 100644
--- a/src/layout/components/IframeToggle/index.vue
+++ b/src/layout/components/IframeToggle/index.vue
@@ -16,4 +16,4 @@ import useTagsViewStore from '@/store/modules/tagsView';
 
 const route = useRoute();
 const tagsViewStore = useTagsViewStore()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 64d9fdb..949e096 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -6,22 +6,21 @@
 
 <script setup lang="ts">
 import useTagsViewStore from '@/store/modules/tagsView'
-import { ElScrollbar } from 'element-plus';
 import { TagView } from 'vue-router'
 const tagAndTagSpacing = ref(4);
 
-const scrollContainerRef = ref(ElScrollbar)
-const scrollWrapper = computed(() => scrollContainerRef.value.$refs.wrapRef);
+const scrollContainerRef = ref<ElScrollbarInstance>()
+const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
 
 onMounted(() => {
-    scrollWrapper.value.addEventListener('scroll', emitScroll, true)
+    scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
 })
 onBeforeUnmount(() => {
-    scrollWrapper.value.removeEventListener('scroll', emitScroll)
+    scrollWrapper.value?.removeEventListener('scroll', emitScroll)
 })
 
 const handleScroll = (e: WheelEvent) => {
-    const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
+    const eventDelta = (e as any).wheelDelta || - e.deltaY * 40
     const $scrollWrapper = scrollWrapper.value;
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
 }
@@ -34,7 +33,7 @@ const tagsViewStore = useTagsViewStore()
 const visitedViews = computed(() => tagsViewStore.visitedViews);
 
 const moveToTarget = (currentTag: TagView) => {
-    const $container = scrollContainerRef.value.$el
+    const $container = scrollContainerRef.value?.$el
     const $containerWidth = $container.offsetWidth
     const $scrollWrapper = scrollWrapper.value;
 
diff --git a/src/types/element.d.ts b/src/types/element.d.ts
index 8d72e6c..e8d1f62 100644
--- a/src/types/element.d.ts
+++ b/src/types/element.d.ts
@@ -25,6 +25,7 @@ declare global {
   declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
   declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
   declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
+  declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
 
   declare type TransferKey = ep.TransferKey;
   declare type CheckboxValueType = ep.CheckboxValueType;