forked from opentiny/tiny-vue
70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<tiny-tabs
|
|
v-model="tabName"
|
|
tab-style="card"
|
|
:drop-config="dropConfig"
|
|
:with-add="true"
|
|
@add="handleAdd"
|
|
style="width: 500px"
|
|
@tab-drag-start="handleStart"
|
|
@tab-drag-over="handleOver"
|
|
@tab-drag-end="handleEnd"
|
|
>
|
|
<tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
|
|
{{ item.content }}
|
|
</tiny-tab-item>
|
|
</tiny-tabs>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
|
|
import Sortable from 'sortablejs'
|
|
|
|
const tabName = ref('2')
|
|
const dropConfig = ref({
|
|
plugin: Sortable
|
|
})
|
|
const Tabs = ref([
|
|
{
|
|
title: 'Tab 1',
|
|
name: '1',
|
|
content: 'Tab 1 content '
|
|
},
|
|
{
|
|
title: 'Tab 2',
|
|
name: '2',
|
|
content: 'Tab 2 content'
|
|
},
|
|
{
|
|
title: 'Tab 3',
|
|
name: '3',
|
|
content: 'Tab 3 content'
|
|
}
|
|
])
|
|
|
|
function handleStart(event) {
|
|
console.log(event)
|
|
}
|
|
|
|
function handleOver(event) {
|
|
console.log(event)
|
|
}
|
|
|
|
function handleEnd(event) {
|
|
const { oldDraggableIndex, newDraggableIndex } = event
|
|
const tab = Tabs.value.splice(oldDraggableIndex, 1)[0]
|
|
Tabs.value.splice(newDraggableIndex, 0, tab)
|
|
|
|
console.log(Tabs.value)
|
|
}
|
|
|
|
function handleAdd() {
|
|
Tabs.value.push({
|
|
title: 'Tab ' + String(Tabs.value.length + 1),
|
|
name: String(Tabs.value.length + 1),
|
|
content: '动态增加tabitem'
|
|
})
|
|
}
|
|
</script>
|