feat: 修改tag栏双击删除

src/layout/components/TagsView/ScrollPane.vue

@@ -55,16 +55,17 @@ export default {
         $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
       } else {
         // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const currentIndex = tagList.findIndex(item => {
+          var c = JSON.parse(currentTag.getAttribute('data'))
+          var i = JSON.parse(item.getAttribute('data'))
+          return c.path === i.path
+        })
         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
-
+        const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing
         // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
+        const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing
         if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
           $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
         } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {

src/layout/components/TagsView/index.vue

@@ -1,20 +1,19 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
+      <div
         v-for="(tag, index) in visitedViews"
         ref="tag"
         :key="tag.path + index"
-        :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent.native="openMenu(tag, $event)"
+        :class="['tags-view-item', isActive(tag) ? 'active' : '']"
+        :data="JSON.stringify({ path: tag.path, query: tag.query, fullPath: tag.fullPath })"
+        @click="djclick({ path: tag.path, query: tag.query, fullPath: tag.fullPath })"
+        @dblclick="sjclick(tag)"
+        @contextmenu.prevent="openMenu(tag, $event)"
       >
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
+      </div>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">刷新</li>
@@ -27,8 +26,8 @@
 
 <script>
 import ScrollPane from './ScrollPane'
-import path from 'path'
-
+import { clickBG } from '@/utils/util.js'
+const ev = new clickBG(200)
 export default {
   components: { ScrollPane },
   data() {
@@ -50,7 +49,6 @@ export default {
   },
   watch: {
     $route(val, oval) {
-      console.log(val, oval, 'route')
       this.addTags()
       this.moveToCurrentTag()
     },
@@ -67,6 +65,16 @@ export default {
     this.addTags()
   },
   methods: {
+    djclick(item) {
+      ev.click(() => {
+        this.$router.push(item)
+      })
+    },
+    sjclick(item) {
+      ev.dblClick(() => {
+        this.closeSelectedTag(item)
+      })
+    },
     isActive(route) {
       return route.path === this.$route.path
     },
@@ -97,7 +105,6 @@ export default {
     initTags() {
       const affixTags = (this.affixTags = this.filterAffixTags(this.routes))
       for (const tag of affixTags) {
-        // Must have tag name
         if (tag.name) {
           this.$store.dispatch('tagsView/addVisitedView', tag)
         }
@@ -114,10 +121,10 @@ export default {
       const tags = this.$refs.tag
       this.$nextTick(() => {
         for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
+          var to = JSON.parse(tag.getAttribute('data'))
+          if (to.path === this.$route.path) {
             this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
+            if (to.fullPath !== this.$route.fullPath) {
               this.$store.dispatch('tagsView/updateVisitedView', this.$route)
             }
             break
@@ -128,18 +135,17 @@ export default {
     refreshSelectedTag(view) {
       if (window.location) {
         window.location.reload()
-      }else{
+      } else {
         this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
-        this.$nextTick(() => {
-          this.$router.replace({
-            path: fullPath,
-            redirect:'/'
+          const { fullPath } = view
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: fullPath,
+              redirect: '/'
+            })
           })
         })
-      })
       }
-     
     },
     closeSelectedTag(view) {
       this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
@@ -163,15 +169,11 @@ export default {
       })
     },
     toLastView(visitedViews, view) {
-      console.log(1111)
       const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
         this.$router.push(latestView.fullPath)
       } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
         if (view.name === 'Dashboard') {
-          // to reload home page
           this.$router.replace({ path: '/redirect' + view.fullPath })
         } else {
           this.$router.push('/')
@@ -184,13 +186,11 @@ export default {
       const offsetWidth = this.$el.offsetWidth // container width
       const maxLeft = offsetWidth - menuMinWidth // left boundary
       const left = e.clientX - offsetLeft + 15 // 15: margin right
-
       if (left > maxLeft) {
         this.left = maxLeft
       } else {
         this.left = left
       }
-
       this.top = e.clientY
       this.visible = true
       this.selectedTag = tag
@@ -214,6 +214,7 @@ export default {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
+      user-select: none;
       display: inline-block;
       position: relative;
       cursor: pointer;
@@ -274,7 +275,6 @@ export default {
 </style>
 
 <style lang="scss">
-//reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

src/utils/util.js

@@ -339,3 +339,19 @@ export function changeNumberMoneyToChinese(money) {
   ChineseStr = Symbol + ChineseStr
   return ChineseStr
 }
+
+// 区分单击事件和双击事件
+export function clickBG(millisecond) {
+  this.timer = null
+  this.click = callback => {
+    clearTimeout(this.timer)
+    this.timer = setTimeout(function () {
+      clearTimeout(this.timer)
+      callback && callback()
+    }, millisecond)
+  }
+  this.dblClick = callback => {
+    clearTimeout(this.timer)
+    callback && callback()
+  }
+}