vue实现带拖拽功能的tab栏组件（awe-dnd）

最近项目中有一个需求，需要拖拽tab栏的顺序 来实现tab栏对应内容数组的顺序改变，在现有ui库中没有找到，就自己开发了一个 简单记录一下。

两种常用的拖拽插件

1、awe-dnd
github地址：https://github.com/hilongjw/vue-dragging
2、vue-draggable
github地址：https://github.com/SortableJS/Vue.Draggable

通过使用过发现vue-draggable 只能实现tab栏列表拖拽，tab对应的内容顺序不能改变。awe-dnd 中可以使用一个数组，这样 tab改变 列表也会改变，所以选择awe-dnd 。

awe-dnd使用方法

1、安装

npm install awe-dnd --save

2、引入

在 main.js 文件中

import VueDND from 'awe-dnd'
Vue.use(VueDND)

3、API

Vue指令的方式调用

v-dragging="{ list: tabList, item: item, group: 'item' }"

4、Arguments

名称	类型	默认值	说明
list	Array	–	可拖拽对象的数组
item	Object	–	每一个可拖拽的对象
group	String	–	unique key

可拖拽tab栏组件实例

效果：

代码：

<template>
    <div>
        <div class="tabBox">
            <div
                    v-for="(item,index) in tabList"
                    v-dragging="{ list: tabList, item: item, group: 'item' }"
                    :key="index"
                    class="tab"
                    :class="{tabActive:item.tabIdx === tabNum}"
                    @click="onTabClick(item,index)"
            >
                {
     {
     item.name}}
                <Icon type="ios-close" size="20" class="icon" @click.stop="onTabDelete(item,index)" />
            </div>
            <Button @click="onTabAdd" class="tabAdd">+</Button>
        </div>
        <div class="contentBox">
            <template v-for="(item,index) in tabList" 
            v-dragging="{ list: tabList, item: item, group: 'item' }">
                <div class="tabContent" v-if="item.tabIdx === tabNum" :key="index">
                    {
     {
     item.other}}--{
     {
     item.tabIdx}}
                </div>
            </template>
        </div>
    </div>
</template>
<script>
    export default {
     
        data() {
     
            return {
     
                tabList: [
                    {
      name: "规则1",tabIdx: 1, other: "内容1"},
                    {
      name: "规则2",tabIdx: 2, other: "内容2"},
                    {
      name: "规则3",tabIdx: 3, other: "内容3"},
                ],
                tabListCount: 3,
                tabNum: 1,
            }
        },
        mounted() {
     
            this.$dragging.$on('dragged', ({
     value}) => {
     
                console.log(value.item)
                console.log(value.list)
            })
            this.$dragging.$on('dragend', () => {
     

            })
        },
        methods: {
     
            onTabAdd() {
     
                this.tabListCount++;
                this.tabList.push({
     
                    other: '内容' + this.tabListCount,
                    tabIdx: this.tabListCount,
                    name: "规则" + this.tabListCount
                })
            },
            onTabDelete(item,index) {
     
                console.log(item,index,'del')
                this.tabList.splice(index,1)
            },
            onTabClick(item,index) {
     
                this.tabNum = item.tabIdx;
                console.log(item,index,'click')
            },

        }
    }
</script>

<style scoped>
    .tabBox {
     
        display: inline-block;
        padding: 0 16px;
        width:100%;
        overflow: auto;
        border-bottom: 1px solid #dcdee2;
        margin-bottom: 16px;
    }
    .tab {
     
        list-style: none;
        float: left;
        width: 100px;
        cursor: default;

        margin: 0;
        margin-right: 4px;
        height: 32px;
        padding: 5px 12px 4px;
        border: 1px solid #dcdee2;
        border-bottom: 0;
        border-radius: 0 0 0 0;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        background: #fff;
    }
    .tab:hover {
     
        color: #57a3f3;
    }

    .icon {
     
        float: right;
        cursor: pointer;
    }
    .tabAdd {
     
        position: relative;
        float: left;
        left: 16px;
        border-bottom: 0;
        border-radius: 0;
    }

    .tabActive {
     
        padding-bottom: 5px;
        background: #fff;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        border-color: #dcdee2;
        color: #294bff;
    }

</style>