fix: 修复tagsView无动画效果

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 }

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) {

src/layout/components/TagsView/index.vue

@@ -259,6 +259,10 @@ watch(
     }
   }
 )
+
+defineExpose({
+  tagRefs
+})
 </script>
 
 <style lang="less" scoped>

src/router/index.ts

@@ -59,7 +59,7 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
   },
   {
     path: '/login',
-    component: () => import('_v/login/index.vue'),
+    component: () => import('@/views/login/index.vue'),
     name: 'Login',
     meta: {
       hidden: true,