From 97187b246b94dd58cb585ebaed7e8644d2f00119 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:26:04 +0800 Subject: [PATCH] update 调整代码格式 --- src/layout/components/TagsView/ScrollPane.vue | 104 ++++++++++++++++++++++++++-------------------------- 1 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index 6a96f75..e4624dc 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -1,3 +1,9 @@ +<template> + <el-scrollbar ref="scrollContainerRef" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll"> + <slot /> + </el-scrollbar> +</template> + <script setup lang="ts"> import useTagsViewStore from '@/store/modules/tagsView' import { ElScrollbar } from 'element-plus'; @@ -8,83 +14,77 @@ const scrollWrapper = computed(() => scrollContainerRef.value.$refs.wrapRef); 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 $scrollWrapper = scrollWrapper.value; - $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 + const eventDelta = (e as any).wheelDelta || -e.deltaY * 40 + const $scrollWrapper = scrollWrapper.value; + $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 } const emits = defineEmits(['scroll']) const emitScroll = () => { - emits('scroll') + emits('scroll') } const tagsViewStore = useTagsViewStore() const visitedViews = computed(() => tagsViewStore.visitedViews); const moveToTarget = (currentTag: TagView) => { - const $container = scrollContainerRef.value.$el - const $containerWidth = $container.offsetWidth - const $scrollWrapper = scrollWrapper.value; + const $container = scrollContainerRef.value.$el + const $containerWidth = $container.offsetWidth + const $scrollWrapper = scrollWrapper.value; - let firstTag = null - let lastTag = null + let firstTag = null + let lastTag = null - // find first tag and last tag - if (visitedViews.value.length > 0) { - firstTag = visitedViews.value[0] - lastTag = visitedViews.value[visitedViews.value.length - 1] - } - - if (firstTag === currentTag) { - $scrollWrapper.scrollLeft = 0 - } else if (lastTag === currentTag) { - $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth - } else { - const tagListDom: any = document.getElementsByClassName('tags-view-item'); - const currentIndex = visitedViews.value.findIndex(item => item === currentTag) - let prevTag = null - let nextTag = null - - for (const k in tagListDom) { - if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) { - if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) { - prevTag = tagListDom[k]; - } - if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) { - nextTag = tagListDom[k]; - } - } + // find first tag and last tag + if (visitedViews.value.length > 0) { + firstTag = visitedViews.value[0] + lastTag = visitedViews.value[visitedViews.value.length - 1] } - // the tag's offsetLeft after of nextTag - const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value + if (firstTag === currentTag) { + $scrollWrapper.scrollLeft = 0 + } else if (lastTag === currentTag) { + $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth + } else { + const tagListDom: any = document.getElementsByClassName('tags-view-item'); + const currentIndex = visitedViews.value.findIndex(item => item === currentTag) + let prevTag = null + let nextTag = null - // the tag's offsetLeft before of prevTag - const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value - if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { - $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth - } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { - $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft + for (const k in tagListDom) { + if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) { + if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) { + prevTag = tagListDom[k]; + } + if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) { + nextTag = tagListDom[k]; + } + } + } + + // the tag's offsetLeft after of nextTag + const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value + + // the tag's offsetLeft before of prevTag + const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value + if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { + $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth + } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { + $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft + } } - } } defineExpose({ - moveToTarget, + moveToTarget, }) </script> - -<template> - <el-scrollbar ref="scrollContainerRef" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll"> - <slot /> - </el-scrollbar> -</template> <style lang="scss" scoped> .scroll-container { -- Gitblit v1.9.3