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

最新推荐文章于 2025-06-07 09:16:14 发布

壹元二九

最新推荐文章于 2025-06-07 09:16:14 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue tab

本文链接：https://blog.csdn.net/weixin_41668951/article/details/106430294

本文记录了在Vue项目中遇到的拖拽tab栏需求，对比了awe-dnd和vue-draggable两个插件，最终选择了awe-dnd，因为它能同步改变tab和内容的顺序。文中详细介绍了awe-dnd的安装、引入、API使用和实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中有一个需求，需要拖拽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