zhaoyapeng
/
vue-admin-studentmanagent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复tagsView无动画效果

Browse Source
master
陈凯龙 4 years ago
parent a4bd2068a5
commit 0e3eb4ba8b
7 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape Escape View File

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

20
src/hooks/event/useScrollTo.ts
Unescape Escape View File

@ -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 }

62
src/layout/components/TagsView/ScrollPane.vue
Unescape Escape View File

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

4
src/layout/components/TagsView/index.vue
Unescape Escape View File

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

2
src/router/index.ts
Unescape Escape View File

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

23
vite.config.ts
Unescape Escape View File

@ -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
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save