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

PanJiaChen · web-flow · commit 96774060020a · 2019-03-05T13:20:30.000+08:00
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
@@ -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
 
diff --git a/src/views/layout/components/TagsView/index.vue b/src/views/layout/components/TagsView/index.vue
@@ -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
     },
diff --git a/src/views/layout/components/index.js b/src/views/layout/components/index.js
@@ -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'

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`</template>`
`27`	`27`
`28`	`28`	`<script>`
`29`		`-import ScrollPane from '@/components/ScrollPane'`
	`29`	`+import ScrollPane from './ScrollPane'`
`30`	`30`	`import { generateTitle } from '@/utils/i18n'`
`31`	`31`	`import path from 'path'`
`32`	`32`
`@@ -90,7 +90,6 @@ export default {`
`90`	`90`	`}`
`91`	`91`	`}`
`92`	`92`	`})`
`93`		`-`
`94`	`93`	`return tags`
`95`	`94`	`},`
`96`	`95`	`initTags() {`
`@@ -115,12 +114,10 @@ export default {`
`115`	`114`	`for (const tag of tags) {`
`116`	`115`	`if (tag.to.path === this.$route.path) {`
`117`	`116`	`this.$refs.scrollPane.moveToTarget(tag)`
`118`		`-`
`119`	`117`	`// when query is different then update`
`120`	`118`	`if (tag.to.fullPath !== this.$route.fullPath) {`
`121`	`119`	`this.$store.dispatch('updateVisitedView', this.$route)`
`122`	`120`	`}`
`123`		`-`
`124`	`121`	`break`
`125`	`122`	`}`
`126`	`123`	`}`
`@@ -178,8 +175,8 @@ export default {`
`178`	`175`	`} else {`
`179`	`176`	`this.left = left`
`180`	`177`	`}`
`181`		`- this.top = e.clientY`
`182`	`178`
	`179`	`+ this.top = e.clientY`
`183`	`180`	`this.visible = true`
`184`	`181`	`this.selectedTag = tag`
`185`	`182`	`},`