dragTabs(vue)

vue实现tabs拖拽

效果图

dragTab.vue

<template>
    <div class="yh-tabs">
        <draggable :list="tabList" :group="groupName" animation="300" item-key="id" @end="dragEnd">
            <template #item="{ element, index }">
                <span :class="['yh-tabs-item', attrs.modelValue === element[modelKey] ? 'active' : '']"
                    @click="changeActive(element)">
                    <slot name="head" :data="{ element, index }">
                        <span>
                            {{ element[label] }}
                        span>
                    slot>
                span>
            template>
        draggable>
    div>
    <div class="tab-pane">
        <slot :item="curTab">slot>
    div>
template>

<script setup>
import { defineProps, useAttrs, defineEmits, computed } from 'vue'
import draggable from 'vuedraggable';
const attrs = useAttrs()
const props = defineProps({
    tabList: {
        type: Array,
        required: true
    },
    modelKey: {
        type: String,
        required: true
    },
    label: {
        type: String,
        required: true
    },
    groupName: {
        type: String,
        required: true
    }
})

const emits = defineEmits(['update:modelValue', 'changeList', 'changeActive'])

const curTab = computed(() => props.tabList.find(item => item[props.modelKey] === attrs.modelValue))

const changeActive = (element) => {
    curTab.value = element
    emits('update:modelValue', element[props.modelKey])
    emits('changeActive', element)
}
const dragEnd = () => emits('changeList', props.tabList)
script>

<style lang="less" scoped>
.yh-tabs {
    position: relative;
    box-sizing: border-box;

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #CCC;
        position: absolute;
        bottom: -7px;
        left: 0;
        z-index: -1;
    }

    .yh-tabs-item {
        padding: 5px 10px;
        cursor: pointer;
    }

    .yh-tabs-item.active {
        color: #1890FF;
        border-bottom: 2px solid #1890FF;
    }

}

.tab-pane {
    margin-top: 24px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

test.vue

<template>
   <yhTabs v-model="active" :tabList="tabPaneList" modelKey="name" label="label" @changeList="changeList"
      groupName="tabs1" @changeActive="changeActive">
      <template #head="{ data: { index } }">
         <span>第{{ index }}列span>
      template>
      <template #="{ item }">
         <div class="yh-tab-pane">
            <div class="myinfo">
               {{ item }}
            div>
            <div>
               <yh-tabs v-model="chTab" :tabList="item.tabs" modelKey="name" label="label" groupName="tabs2">
                  <template #="{ item }">
                     {{ item }}
                  template>
               yh-tabs>
            div>
         div>
      template>
   yhTabs>
template>
  
<script  setup>
import { ref } from 'vue'
import yhTabs from './dragTabs/index.vue'
const active = ref('1')
const chTab = ref('1-1')
const tabPaneList = ref([
   {
      name: '1',
      label: '标签1',
      tabs: [
         {
            name: '1-1',
            label: '标签1-1'
         },
         {
            name: '1-2',
            label: '标签1-2'
         }
      ]
   },
   {
      name: '2',
      label: '标签2',
      tabs: [
         {
            name: '2-1',
            label: '标签2-1'
         },
         {
            name: '2-2',
            label: '标签2-2'
         }
      ]
   },
   {
      name: '3',
      label: '标签3',
      tabs: [
         {
            name: '3-1',
            label: '标签3-1'
         },
         {
            name: '3-2',
            label: '标签3-2'
         }
      ]
   },
   {
      name: '4',
      label: '标签4',
      tabs: [
         {
            name: '4-1',
            label: '标签4-1'
         },
         {
            name: '4-2',
            label: '标签4-2'
         }
      ]
   }
])

const changeList = data => tabPaneList.value = data
const changeActive = active => {
   chTab.value = active.tabs[0].name
}
script>

<style lang="less" scoped>
.myinfo{
   margin: 24px;
}
.yh-tab-pane{
   margin-top: 24px;
}
style>
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102