You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
947 B
50 lines
947 B
11 months ago
|
<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>
|