From f801f4fb11ff8ca08417a9ddf0231fb570fa26e3 Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期一, 24 七月 2023 16:47:51 +0800
Subject: [PATCH] fix 修复 固定页面header穿模问题
---
src/layout/components/TagsView/ScrollPane.vue | 15 +++++++--------
1 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 64d9fdb..b50c628 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;
@@ -96,7 +95,7 @@
bottom: 0px;
}
:deep(.el-scrollbar__wrap) {
- height: 39px;
+ height: 49px;
}
}
</style>
--
Gitblit v1.9.3