feat: 🎸 layout布局重构中
chenkl
5 years ago
parent
29d9c98860
commit
bd24b92acb
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-scrollbar
|
|
||||||
ref="scrollContainer"
|
|
||||||
class="scroll-container"
|
|
||||||
@wheel="handleScroll"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</el-scrollbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, unref, nextTick } from 'vue'
|
|
||||||
import { useScrollTo } from '@/hooks/useScrollTo'
|
|
||||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ScrollPane',
|
|
||||||
setup() {
|
|
||||||
const scrollContainer = ref<HTMLElement | null>(null)
|
|
||||||
|
|
||||||
function handleScroll(e: any): void {
|
|
||||||
const eventDelta: number = e.wheelDelta || -e.deltaY * 40
|
|
||||||
const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
|
|
||||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
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]
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
|
||||||
nextTick(() => {
|
|
||||||
const { start } = useScrollTo({
|
|
||||||
el: $scrollWrapper,
|
|
||||||
position: 'scrollLeft',
|
|
||||||
to: afterNextTagOffsetLeft - $containerWidth,
|
|
||||||
duration: 500
|
|
||||||
})
|
|
||||||
start()
|
|
||||||
})
|
|
||||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
|
||||||
nextTick(() => {
|
|
||||||
const { start } = useScrollTo({
|
|
||||||
el: $scrollWrapper,
|
|
||||||
position: 'scrollLeft',
|
|
||||||
to: beforePrevTagOffsetLeft,
|
|
||||||
duration: 500
|
|
||||||
})
|
|
||||||
start()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveTo(to: number) {
|
|
||||||
const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
|
|
||||||
nextTick(() => {
|
|
||||||
const { start } = useScrollTo({
|
|
||||||
el: $scrollWrapper,
|
|
||||||
position: 'scrollLeft',
|
|
||||||
to: $scrollWrapper.scrollLeft + to,
|
|
||||||
duration: 500
|
|
||||||
})
|
|
||||||
start()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handleScroll,
|
|
||||||
scrollContainer,
|
|
||||||
moveToTarget,
|
|
||||||
moveTo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.scroll-container {
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue