fix: 修复tagsView无动画效果
This commit is contained in:
陈凯龙
parent
a4bd2068a5
commit
0e3eb4ba8b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -24,10 +24,11 @@ function handleScroll(e: any): void {
|
|||
}
|
||||
|
||||
function moveToTarget(currentTag: any) {
|
||||
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(scrollContainer) as any).$parent.$parent.tagRefs
|
||||
const tagList = unref((unref(scrollContainer) as any).$parent.$parent.tagRefs)
|
||||
|
||||
let firstTag: any = null
|
||||
let lastTag: any = null
|
||||
|
|
@ -55,7 +56,6 @@ function moveToTarget(currentTag: any) {
|
|||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
||||
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
nextTick(() => {
|
||||
const { start } = useScrollTo({
|
||||
el: $scrollWrapper,
|
||||
position: 'scrollLeft',
|
||||
|
|
@ -63,9 +63,7 @@ function moveToTarget(currentTag: any) {
|
|||
duration: 500
|
||||
})
|
||||
start()
|
||||
})
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
nextTick(() => {
|
||||
const { start } = useScrollTo({
|
||||
el: $scrollWrapper,
|
||||
position: 'scrollLeft',
|
||||
|
|
@ -73,9 +71,9 @@ function moveToTarget(currentTag: any) {
|
|||
duration: 500
|
||||
})
|
||||
start()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveTo(to: number) {
|
||||
|
|
|
|||
|
|
@ -259,6 +259,10 @@ watch(
|
|||
}
|
||||
}
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
tagRefs
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
|||
20
yarn.lock
20
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue