perf[TagsView]: set the scrollPane as a business component (#1660)

This commit is contained in:
花裤衩 2019-03-05 13:20:30 +08:00 committed by Pan
parent 6d9ac37662
commit 583e96cca5
3 changed files with 11 additions and 8 deletions

View File

@ -14,16 +14,21 @@ export default {
left: 0
}
},
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
}
},
methods: {
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag
let firstTag = null
@ -44,6 +49,7 @@ export default {
const currentIndex = tagList.findIndex(item => 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

View File

@ -26,7 +26,7 @@
</template>
<script>
import ScrollPane from '@/components/ScrollPane'
import ScrollPane from './ScrollPane'
import { generateTitle } from '@/utils/i18n'
import path from 'path'
@ -90,7 +90,6 @@ export default {
}
}
})
return tags
},
initTags() {
@ -115,12 +114,10 @@ export default {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag)
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch('updateVisitedView', this.$route)
}
break
}
}
@ -178,8 +175,8 @@ export default {
} else {
this.left = left
}
this.top = e.clientY
this.top = e.clientY
this.visible = true
this.selectedTag = tag
},

View File

@ -1,4 +1,4 @@
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView'
export { default as TagsView } from './TagsView/index.vue'
export { default as AppMain } from './AppMain'