ant-design-vue 的 tab 标签页的拖拽功能

项目中使用 ant-design-vue的 tab组件时，需要可以对tab的标签页进行调整顺序，结果查看文档，发现vue的组件是没有提供此功能，而react的组件提供了此功能，本着一切从简的想法，于是乎，找到了如下的解决方法：

因为项目中已经有用到vue的Sortable组件，所以就结合这个组件来实现tab标签页的拖拽

<template>
  
  <a-tabs
    type="card"
    size="small"
    v-model="activeTab"
    @tabClick="clickFunc"
    id="drage-tab"
  >
    <a-tab-pane v-for="item in dataList" :key="item.value" :tab="item.name">
      {{ item.value }}
    a-tab-pane>
  a-tabs>
template>

<script>
export default {
  name: 'TestTabDrag',
  data () {
    return {
      activeTab: 1,
      dataList: [
        { name: '标签一', value: 1 },
        { name: '标签二', value: 2 },
        { name: '标签三', value: 3 },
        { name: '标签四', value: 4 },
        { name: '标签五', value: 5 },
        { name: '标签六', value: 6 },
        { name: '标签七', value: 7 },
        { name: '标签八', value: 8 }
      ]
    }
  },
  methods: {
    clickFunc () {

    },
    setDragFunc () {
      // 找到各标签页的父级元素
      let drageTab = document.getElementById('drage-tab').querySelector('.ant-tabs-nav').firstChild
      // 因为我在 main.js 中引入了 sortable, 将它绑定在 vue 上，所以这里可以使用 this.$sortable
      // 具体的参数请查看 sortable 文档
      this.$sortable.create(drageTab, {
        ghostClass: 'drage-placeholder-style',
        onEnd: this.dragTabEndFunc
      })
    },
    dragTabEndFunc (obj) {
      console.log('-0-0-0-0-0-0-0-0-0-0-0')
      console.log(obj)
      console.log(this.dataList)
    }
  },
  mounted () {
    this.$nextTick(this.setDragFunc)
  }
}
script>

<style scoped>

style>