55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<ul class="drag-area" ref="el" style="margin: 0;">
|
|
<li v-for="el in modelValue" :key="el.name">
|
|
<div style="min-width: fit-content;border: 1px solid red;">
|
|
<p>{{ el.name }}:{{ el.id }}</p>
|
|
</div>
|
|
<nested-function v-model="el.children" />
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useDraggable} from 'vue-draggable-plus'
|
|
import { computed, ref } from 'vue'
|
|
import { IPageComponent } from '../type/IPageComponent'
|
|
|
|
interface Props {
|
|
modelValue: IPageComponent[]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: IPageComponent[]): void
|
|
}
|
|
const emits = defineEmits<Emits>()
|
|
const list = computed({
|
|
get: () => props.modelValue,
|
|
set: value => emits('update:modelValue', value)
|
|
})
|
|
|
|
const el = ref()
|
|
useDraggable(el, list, {
|
|
group: 'designer',
|
|
animation: 150,
|
|
onStart() {
|
|
console.log('start')
|
|
},
|
|
onUpdate() {
|
|
console.log('update list')
|
|
},
|
|
onAdd: () => {
|
|
// console.log(e)
|
|
console.log('add list')
|
|
},
|
|
onRemove: () => {
|
|
console.log('remove list')
|
|
}
|
|
},)
|
|
</script>
|
|
<style scoped>
|
|
.drag-area {
|
|
min-height: 50px;
|
|
outline: 1px dashed;
|
|
background-color: hsl(0, 0%, 100%);
|
|
}
|
|
</style> |