From 0e3eb4ba8b1503e1d221dfda59a3a0001dbdcb56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com> Date: Sat, 23 Oct 2021 16:35:18 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DtagsView=E6=97=A0?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/hooks/event/useScrollTo.ts | 20 +++--- src/layout/components/TagsView/ScrollPane.vue | 62 +++++++++---------- src/layout/components/TagsView/index.vue | 4 ++ src/router/index.ts | 2 +- vite.config.ts | 23 ++++--- yarn.lock | 20 +++--- 7 files changed, 72 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 04fdb15de..9797eddf5 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "clipboard": "^2.0.8", "echarts": "^5.2.1", "echarts-wordcloud": "^2.0.0", - "element-plus": "1.1.0-beta.21", + "element-plus": "1.1.0-beta.24", "highlight.js": "^11.3.1", "intro.js": "^4.2.2", "lodash-es": "^4.17.21", diff --git a/src/hooks/event/useScrollTo.ts b/src/hooks/event/useScrollTo.ts index 891bfec40..35efe3036 100644 --- a/src/hooks/event/useScrollTo.ts +++ b/src/hooks/event/useScrollTo.ts @@ -1,4 +1,5 @@ -import { requestAnimationFrame } from '@/utils/animation' +// import { requestAnimationFrame } from '@/utils/animation' +import { ref, unref } from 'vue' export interface ScrollToParams { el: HTMLElement @@ -27,20 +28,20 @@ export function useScrollTo({ duration = 500, callback }: ScrollToParams) { - let isActiveRef = false + const isActiveRef = ref(false) const start = el[position] const change = to - start const increment = 20 let currentTime = 0 - const animateScroll = function () { - if (!isActiveRef) { + function animateScroll() { + if (!unref(isActiveRef)) { return } currentTime += increment const val = easeInOutQuad(currentTime, start, change, duration) move(el, position, val) - if (currentTime < duration && isActiveRef) { + if (currentTime < duration && unref(isActiveRef)) { requestAnimationFrame(animateScroll) } else { if (callback) { @@ -48,13 +49,14 @@ export function useScrollTo({ } } } - const run = () => { - isActiveRef = true + + function run() { + isActiveRef.value = true animateScroll() } - const stop = () => { - isActiveRef = false + function stop() { + isActiveRef.value = false } return { start: run, stop } diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index e9f621c47..3141dd424 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -24,38 +24,38 @@ function handleScroll(e: any): void { } function moveToTarget(currentTag: any) { - const $container: any = (unref(scrollContainer) as any).$el - const $containerWidth: number = $container.offsetWidth - const $scrollWrapper: any = (unref(scrollContainer) as any).wrap - const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs + nextTick(() => { + const $container: any = (unref(scrollContainer) as any).$el + const $containerWidth: number = $container.offsetWidth + const $scrollWrapper: any = (unref(scrollContainer) as any).wrap + const tagList = unref((unref(scrollContainer) as any).$parent.$parent.tagRefs) - let firstTag: any = null - let lastTag: any = null + let firstTag: any = null + let lastTag: any = null - // find first tag and last tag - if (tagList.length > 0) { - firstTag = tagList[0] - lastTag = tagList[tagList.length - 1] - } + // find first tag and last tag + if (tagList.length > 0) { + firstTag = tagList[0] + lastTag = tagList[tagList.length - 1] + } - if (firstTag === currentTag) { - $scrollWrapper.scrollLeft = 0 - } else if (lastTag === currentTag) { - $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth - } else { - // find preTag and nextTag - const currentIndex: number = tagList.findIndex((item: any) => item === currentTag) - const prevTag = tagList[currentIndex - 1] - const nextTag = tagList[currentIndex + 1] - // the tag's offsetLeft after of nextTag - const afterNextTagOffsetLeft = - nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing + if (firstTag === currentTag) { + $scrollWrapper.scrollLeft = 0 + } else if (lastTag === currentTag) { + $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth + } else { + // find preTag and nextTag + const currentIndex: number = tagList.findIndex((item: any) => item === currentTag) + const prevTag = tagList[currentIndex - 1] + const nextTag = tagList[currentIndex + 1] + // the tag's offsetLeft after of nextTag + const afterNextTagOffsetLeft = + nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing - // the tag's offsetLeft before of prevTag - const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing + // the tag's offsetLeft before of prevTag + const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing - if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { - nextTick(() => { + if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { const { start } = useScrollTo({ el: $scrollWrapper, position: 'scrollLeft', @@ -63,9 +63,7 @@ function moveToTarget(currentTag: any) { duration: 500 }) start() - }) - } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { - nextTick(() => { + } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { const { start } = useScrollTo({ el: $scrollWrapper, position: 'scrollLeft', @@ -73,9 +71,9 @@ function moveToTarget(currentTag: any) { duration: 500 }) start() - }) + } } - } + }) } function moveTo(to: number) { diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index aee19ec8d..83dc39ad4 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -259,6 +259,10 @@ watch( } } ) + +defineExpose({ + tagRefs +})