add 新增ElScrollbarInstance

LiuHao

2023-06-18 a46c511f1f7f99554536220dff7c00d7b13ab318

 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: 49px;
    height: 39px;
  }
}
</style>