fix: 修复tagsView无动画效果

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",

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,

vite.config.ts

@@ -6,7 +6,8 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueSetupExtend from 'vite-plugin-vue-setup-extend'
 import eslintPlugin from 'vite-plugin-eslint'
-import styleImport from 'vite-plugin-style-import'
+// import styleImport from 'vite-plugin-style-import'
+import ElementPlus from 'unplugin-element-plus/vite'
 import viteSvgIcons from 'vite-plugin-svg-icons'
 import commonjsExternals from 'vite-plugin-commonjs-externals'
 
@@ -20,13 +21,16 @@ export default defineConfig({
     vue(),
     vueJsx(),
     vueSetupExtend(),
-    styleImport({
-      libs: [{
-        libraryName: 'element-plus',
-        resolveStyle: (name) => {
-          return `element-plus/es/components/${name.split('el-')[1]}/style/css`
-        }
-      }]
+    // styleImport({
+    //   libs: [{
+    //     libraryName: 'element-plus',
+    //     resolveStyle: (name) => {
+    //       return `element-plus/es/components/${name.split('el-')[1]}/style/css`
+    //     }
+    //   }]
+    // }),
+    ElementPlus({
+      useSource: false
     }),
     Components({
       dts: true,
@@ -72,5 +76,8 @@ export default defineConfig({
         replacement: pathResolve('src/components') + '/'
       }
     ]
+  },
+  build: {
+    sourcemap: true
   }
 })

yarn.lock

@@ -775,10 +775,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.10.1":
+"@popperjs/core@^2.10.2":
   version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
-  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+  resolved "https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.10.2.tgz?cache=0&sync_timestamp=1633001441229&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha1-B5jAM1Hw3qGlpMq93yalWny+5ZA=
 
 "@rollup/pluginutils@^4.1.0", "@rollup/pluginutils@^4.1.1":
   version "4.1.1"
@@ -2561,13 +2561,13 @@ electron-to-chromium@^1.3.857:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.864.tgz#6a993bcc196a2b8b3df84d28d5d4dd912393885f"
   integrity sha512-v4rbad8GO6/yVI92WOeU9Wgxc4NA0n4f6P1FvZTY+jyY7JHEhw3bduYu60v3Q1h81Cg6eo4ApZrFPuycwd5hGw==
 
-element-plus@1.1.0-beta.21:
-  version "1.1.0-beta.21"
-  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.1.0-beta.21.tgz#4b0232b908d1defee81ef94913c9479342d9d7e6"
-  integrity sha512-QaAX909KgFufXkIKAwXrdHRmv1e+jIyc1SlN90mg9HBE09MnInGUXy0qdYZhVoMgBFyStMkiSIz7XLG8m0ac8A==
+element-plus@1.1.0-beta.24:
+  version "1.1.0-beta.24"
+  resolved "https://registry.npmmirror.com/element-plus/download/element-plus-1.1.0-beta.24.tgz?cache=0&sync_timestamp=1634700108430&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Felement-plus%2Fdownload%2Felement-plus-1.1.0-beta.24.tgz#858b05932ebc0be15419d3974d15be2a4f4b696c"
+  integrity sha1-hYsFky68C+FUGdOXTRW+Kk9LaWw=
   dependencies:
     "@element-plus/icons" "^0.0.11"
-    "@popperjs/core" "^2.10.1"
+    "@popperjs/core" "^2.10.2"
     "@vueuse/core" "~6.1.0"
     async-validator "^4.0.3"
     dayjs "^1.10.7"
@@ -7098,8 +7098,8 @@ universalify@^2.0.0:
 
 unplugin-element-plus@^0.1.3:
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/unplugin-element-plus/-/unplugin-element-plus-0.1.3.tgz#3fefadef8a2a965ff3a2846beae6ae651f194fee"
-  integrity sha512-6GO1tuDIXcoYFkbL26Mrd84oUOgAHShcwn/xma5bwmBN2O0N0s13RbBDsK53vm4hxRKIVuFSSr659BkpmXWm2w==
+  resolved "https://registry.npmmirror.com/unplugin-element-plus/download/unplugin-element-plus-0.1.3.tgz#3fefadef8a2a965ff3a2846beae6ae651f194fee"
+  integrity sha1-P++t74oqll/zooRr6uauZR8ZT+4=
   dependencies:
     "@rollup/pluginutils" "^4.1.1"
     es-module-lexer "^0.9.3"