49 lines
947 B
49 lines
947 B
<script setup> |
|
import {ref, onMounted} from "vue"; |
|
import Sortable from "sortablejs"; |
|
import {useStore} from "vuex"; |
|
|
|
|
|
// 注册store |
|
const store = useStore() |
|
|
|
const tabsRef = ref(null); |
|
|
|
const select_data = store.state.ec_api_data |
|
|
|
const tabs = ref([]); |
|
|
|
|
|
onMounted(() => { |
|
// 处理拖拽 |
|
const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav'); |
|
new Sortable(elTabsHeader, { |
|
animation: 150, |
|
ghostClass: 'dragging', |
|
draggable: '.el-tabs__item', |
|
onEnd: ({ oldIndex, newIndex }) => { |
|
const movedTab = tabs.value.splice(oldIndex-1, 1)[0]; |
|
tabs.value.splice(newIndex-1, 0, movedTab); |
|
}, |
|
}); |
|
|
|
|
|
}); |
|
</script> |
|
|
|
<template> |
|
<el-tabs ref="tabsRef"> |
|
<el-tab-pane |
|
v-for="tab in store.state.ec_select_api" |
|
:key="tab.id" |
|
:label="tab.desc" |
|
:name="tab.id" |
|
> |
|
{{ tab.desc }} |
|
</el-tab-pane> |
|
</el-tabs> |
|
</template> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|