feat(dragsort): 页签拖拽排序

lib/RouterTab.js

@@ -46,6 +46,12 @@ const RouterTab = {
       default: false
     },
 
+    // 是否支持页签拖拽排序
+    dragsort: {
+      type: Boolean,
+      default: true
+    },
+
     // 是否保留最后一个页签不被关闭
     keepLastTab: {
       type: Boolean,
@@ -115,7 +121,7 @@ const RouterTab = {
   data() {
     return {
       items: [], // 页签项
-      loading: false, // 路由页面 loading
+      isDragging: false, // 是否正在拖拽
       aliveReady: false // RouterAlive 初始化
     }
   },
@@ -157,13 +163,6 @@ const RouterTab = {
     }
   },
 
-  watch: {
-    // 路由切换更新激活的页签
-    $route() {
-      this.loading = false
-    }
-  },
-
   created() {
     // 添加到原型链
     RouterTab.Vue.prototype.$tabs = this

lib/RouterTab.vue

@@ -38,7 +38,7 @@
     </header>
 
     <!-- 页面容器 -->
-    <div class="router-tab__container" :class="{ loading }">
+    <div class="router-tab__container">
       <router-alive
         page-class="router-tab-page"
         :keep-alive="keepAlive"

lib/components/Contextmenu.vue

@@ -40,7 +40,7 @@ export default {
   computed: {
     // 激活菜单的页签
     target() {
-      return this.$tabs.$refs.tab[this.data.index]
+      return this.tabMap[this.data.id]
     },
 
     // 菜单选项
@@ -64,9 +64,20 @@ export default {
       return this.menuList.some(item => item.icon)
     },
 
-    // 页签
+    // 页签 map
+    tabMap() {
+      const map = {}
+
+      this.$tabs.$refs.tab.forEach(item => {
+        map[item.id] = item
+      })
+
+      return map
+    },
+
+    // 页签组件列表
     tabs() {
-      return this.$tabs.$refs.tab
+      return this.$tabs.items.map(item => this.tabMap[item.id])
     },
 
     // 左侧可关闭的页签

lib/components/TabItem.vue

@@ -6,9 +6,16 @@
       [tabClass || '']: true,
       'is-active': $tabs.activeTabId === id,
       'is-closable': closable,
-      'is-contextmenu': $tabs.contextData.id === id
+      'is-contextmenu': $tabs.contextData.id === id,
+      'is-drag-over': isDragOver && !isDragging
     }"
     :to="to"
+    :draggable="$tabs.dragsort"
+    @dragstart.native="onDragStart"
+    @dragend.native="onDragEnd"
+    @dragover.native.prevent="isDragOver = true"
+    @dragleave.native.prevent="isDragOver = false"
+    @drop.native="onDrop"
   >
     <slot v-bind="this">
       <i v-if="icon" class="router-tab__item-icon" :class="icon" />
@@ -40,6 +47,13 @@ export default {
     index: Number
   },
 
+  data() {
+    return {
+      isDragging: false, // 是否正在拖拽
+      isDragOver: false // 是否拖拽经过
+    }
+  },
+
   computed: {
     // 从 this.data 提取计算属性
     ...mapGetters('data', ['id', 'to', 'icon', 'tabClass', 'target', 'href']),
@@ -75,6 +89,30 @@ export default {
     // 关闭当前页签
     close() {
       this.$tabs.closeTab(this.id)
+    },
+
+    // 拖拽
+    onDragStart(e) {
+      this.isDragging = this.$tabs.isDragging = true
+      e.dataTransfer.dropEffect = 'move'
+      e.dataTransfer.setData('text', this.index + '')
+    },
+
+    // 拖拽结束
+    onDragEnd() {
+      this.isDragging = this.$tabs.isDragging = false
+    },
+
+    // 释放后排序
+    onDrop(e) {
+      const { items } = this.$tabs
+      const fromIndex = +e.dataTransfer.getData('text')
+      const tab = items[fromIndex]
+
+      items.splice(fromIndex, 1)
+      items.splice(this.index, 0, tab)
+
+      this.isDragOver = false
     }
   }
 }

lib/components/TabScroll.vue

@@ -60,6 +60,7 @@ export default {
     hasScroller() {
       return (
         !this.isMobile &&
+        !this.$tabs.isDragging &&
         this.scrollData.scrollWidth > this.scrollData.clientWidth
       )
     },

lib/scss/routerTab.scss

@@ -58,7 +58,7 @@ $close-icon-size: 13px;
 
   // 滚动条
   &__scrollbar {
-    $h: 4px;
+    $h: 3px;
 
     position: absolute;
     left: 0;
@@ -151,6 +151,12 @@ $close-icon-size: 13px;
       border-bottom-color: #fff;
     }
 
+    // 拖拽经过
+    &.is-drag-over {
+      background: rgba(0, 0, 0, 0.05);
+      transition: background 0.15s ease;
+    }
+
     // 页签标题
     &-title {
       max-width: 100px;

src/components/frames/Dragsort.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-tab :dragsort="false" />
+</template>

src/config/menu.js

@@ -14,14 +14,15 @@ export default [
     children: [
       { text: '过渡效果', to: '/transition' },
       { text: '插槽', to: '/slot' },
-      { text: '右键菜单', to: '/contextmenu' }
+      { text: '右键菜单', to: '/contextmenu' },
+      { text: '页签排序-禁用', to: '/dragsort' }
     ]
   },
   {
     text: '缓存控制',
     children: [
       { text: '页签规则', to: '/default/rule' },
-      { text: '页签缓存', to: '/default/no-cache' },
+      { text: '页签缓存-禁用', to: '/default/no-cache' },
       { text: '最大缓存数', to: '/max-alive' },
       { text: '复用组件', to: '/reuse' }
     ]