博客

项目中使用

ant-design-vue

的

tab

组件时，需要可以对

tab

的标签页进行调整顺序，结果查看文档，发现

vue

的组件是没有提供此功能，而

react

的组件提供了此功能，本着一切从简的想法，于是乎，找到了如下的解决方法：

因为项目中已经有用到

vue

的

Sortable

组件，所以就结合这个组件来实现

tab

标签页的拖拽

<template>
  <!-- 测试 ant tag 组件的拖拽 -->
  <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>