首页el-tabs 支持拖拽 vue3

el-tabs 支持拖拽 vue3

时间: 2025-04-16 08:38:33 浏览: 26

### Vue 3 实现 `el-tabs` 拖拽功能为了在 Vue 3 中实现 Element Plus 的 `el-tabs` 组件的拖拽功能，可以借助第三方库如 Sortable.js 来增强组件的功能。下面是一个详细的实例说明。 #### 安装依赖项首先安装所需的 npm 包： ```bash npm install element-plus sortablejs vue-draggable-next ``` #### 创建可拖拽 Tabs 组件创建一个新的 Vue 组件来封装带有拖拽功能的 tabs: ```vue <template> <div class="draggable-tabs"> <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab"> <draggable :list="tabs" item-key="name"> <template #item="{element}"> <el-tab-pane :label="element.label" :name="element.name">{{ element.content }}</el-tab-pane> </template> </draggable> </el-tabs> </div> </template> <script setup> import { ref } from 'vue' import draggable from 'vuedraggable' import ElTabs from 'element-plus/lib/components/tabs/index' import ElTabPane from 'element-plus/lib/components/tab-pane' const activeTab = ref('1') const tabs = ref([ { label: '标签一', name: '1', content: '内容一' }, { label: '标签二', name: '2', content: '内容二' } ]) function removeTab(targetName) { const index = tabs.value.findIndex(tab => tab.name === targetName) if (index !== -1 && tabs.value.length > 0) { tabs.value.splice(index, 1) if (targetName === activeTab.value && tabs.value.length >= 1) { if (index >= tabs.value.length) { activeTab.value = tabs.value[tabs.value.length - 1].name } else { activeTab.value = tabs.value[index].name } } } } </script> ``` 此代码片段展示了如何通过引入 `sortablejs` 和 `vue-draggable-next` 库，在基于 Vue 3 构建的应用程序中使 `el-tabs` 支持拖放操作[^1]。

阅读全文