From a46c511f1f7f99554536220dff7c00d7b13ab318 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 18 六月 2023 22:31:35 +0800
Subject: [PATCH] add 新增ElScrollbarInstance
---
src/types/element.d.ts | 1 +
src/layout/components/IframeToggle/index.vue | 2 +-
.eslintrc-auto-import.json | 1 +
src/layout/components/TagsView/ScrollPane.vue | 13 ++++++-------
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 @@
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 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 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;
--
Gitblit v1.9.3