fix: issue of contextmenu in TabsView component; 🐛

修复：TabsView 组件右键菜单的bug;

src/config/config.js

@@ -4,8 +4,9 @@ module.exports = {
     color: '#13c2c2',
     mode: 'night'
   },
+  multiPage: true,
   animate: {
-    name: 'zoom',
-    direction: 'left'
+    name: 'roll',
+    direction: 'default'
   }
 }

src/layouts/TabsView.vue

@@ -51,9 +51,10 @@ export default {
     ...mapState('setting', ['multiPage', 'animate', 'layout'])
   },
   created () {
-    this.pageList.push(this.$route)
-    this.linkList.push(this.$route.fullPath)
-    this.activePage = this.$route.fullPath
+    const route = this.$route
+    this.pageList.push(route)
+    this.linkList.push(route.fullPath)
+    this.activePage = route.fullPath
   },
   watch: {
     '$route': function (newRoute) {
@@ -61,7 +62,7 @@ export default {
       if (!this.multiPage) {
         this.linkList = [newRoute.fullPath]
         this.pageList = [newRoute]
-      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+      } else if (this.linkList.indexOf(newRoute.fullPath) == -1) {
         this.linkList.push(newRoute.fullPath)
         this.pageList.push(newRoute)
       }
@@ -89,8 +90,8 @@ export default {
         this.$message.warning('这是最后一页，不能再关闭了啦')
         return
       }
-      this.pageList = this.pageList.filter(item => item.fullPath !== key)
       let index = this.linkList.indexOf(key)
+      this.pageList = this.pageList.filter(item => item.fullPath !== key)
       this.linkList = this.linkList.filter(item => item !== key)
       if (key == this.activePage) {
         index = index >= this.linkList.length ? this.linkList.length - 1 : index
@@ -99,8 +100,8 @@ export default {
       }
     },
     onContextmenu (e) {
-      const pagekey = this.getPageKey(e.target)
-      if (pagekey !== null) {
+      const pageKey = this.getPageKey(e.target)
+      if (pageKey !== null) {
         e.preventDefault()
         this.menuVisible = true
       }
@@ -148,16 +149,18 @@ export default {
       let index = this.linkList.indexOf(pageKey)
       this.linkList = this.linkList.slice(index)
       this.pageList = this.pageList.slice(index)
-      if (this.linkList.indexOf(this.activePage) < 0) {
+      if (this.linkList.indexOf(this.activePage) == -1) {
         this.activePage = this.linkList[0]
+        this.$router.push(this.activePage)
       }
     },
     closeRight (pageKey) {
       let index = this.linkList.indexOf(pageKey)
       this.linkList = this.linkList.slice(0, index + 1)
       this.pageList = this.pageList.slice(0, index + 1)
-      if (this.linkList.indexOf(this.activePage < 0)) {
+      if (this.linkList.indexOf(this.activePage) == -1) {
         this.activePage = this.linkList[this.linkList.length - 1]
+        this.$router.push(this.activePage)
       }
     }
   }

src/pages/dashboard/analysis/Analysis.vue

@@ -124,7 +124,7 @@ for (let i = 0; i < 8; i++) {
 }
 
 export default {
-  name: 'analysis',
+  name: 'Analysis',
   i18n: require('./i18n'),
   data () {
     return {
@@ -133,7 +133,7 @@ export default {
     }
   },
   created() {
-    setTimeout(() => this.loading = !this.loading, 500)
+    setTimeout(() => this.loading = !this.loading, 1000)
   },
   components: {Trend, SalesData, HotSearch, RankingList, Bar, MiniProgress, MiniBar, MiniArea, ChartCard}
 }