antd-design-vue tabs标签拖拽功能实现

antv的tabs标签拖拽实现

目前antd vue3.2.13的tabs标签页不支持左右拖拽功能。现项目中需要使用，为此引入vuedraggable

准备

• 安装vuedraggable

	npm i vuedraggable

• 参考指南
  • vue2 Vue.Draggable、vue.draggable中文文档
  • vue3 vue.draggable.next、vue.draggable.next 中文文档

开始

代码

<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane v-for="item in state.list" :key="item.id" tab="Tab 1">
      我是{{ item.name }}，今年{{ item.age }}
    </a-tab-pane>

    <template #renderTabBar>
      <div class="ant-tabs-nav-wrap">
        <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px)">
          <draggable v-model="state.list" item-key="id">
            <template #item="{ element }">
              <div
                class="ant-tabs-tab"
                :class="{ 'ant-tabs-tab-active': activeKey === element.id }"
                @click="activeKey = element.id"
              >
                <div
                  role="tab"
                  aria-selected="true"
                  class="ant-tabs-tab-btn"
                  tabindex="0"
                  id="rc-tabs-12-tab-1"
                  aria-controls="rc-tabs-12-panel-1"
                >
                  {{ element.name }}
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </template>
  </a-tabs>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import draggable from 'vuedraggable'

const activeKey = ref<number>(0)

const state = reactive({
  list: [
    {
      id: 0,
      name: '张三',
      age: 18
    },
    {
      id: 1,
      name: '李四',
      age: 20
    },
    {
      id: 2,
      name: '王五',
      age: 24
    }
  ]
})
</script>

解释

• 首先需要自定义页签头

  <!-- 基础部分 -->
  <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
  <a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
  
  <!-- 自定义表头部分 -->
   <template #renderTabBar="{ DefaultTabBar, ...props }">
     <!-- 自定义内容 -->
   </template>
  

• 通过F12审查元素，将页头的样式复制一份
  • 将复制的代码放在上述的自定义内容中
• 确定你需要拖拽的部分，并进行适当的调整
  • 将需要拖拽的部分，放在<draggable>标签中
  • 标签的使用，可参考上述准备>参考指南
• 需要注意
  • class的激活样式：:class="{ 'ant-tabs-tab-active': activeKey === element.id }"
  • 仅需写一个<a-tab-pane>标签，其余均通过循环展示

———————————————————————
PS：个人总结，仅供参考，不足之处，欢迎评论指教。