41 lines
970 B
Vue
41 lines
970 B
Vue
<script setup>
|
|
import draggable from 'vuedraggable'
|
|
import {onUpdated, ref} from "vue";
|
|
// import ListItem from "@/components/ListItem.vue";
|
|
|
|
const props = defineProps({
|
|
todo: Array
|
|
})
|
|
const emit = defineEmits(['updateTodo'])
|
|
|
|
const todoList = ref(props.todo)
|
|
|
|
const handleChange = () => {
|
|
emit('updateTodo', todoList.value)
|
|
}
|
|
|
|
const handleClick = (index) => {
|
|
const data = todoList.value.splice(index, 1)
|
|
emit('updateTodo', todoList.value, data[0])
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="basis-1/4">
|
|
<h2 class="text-xl text-center">事件库</h2>
|
|
<draggable :list="todoList"
|
|
class="list-group"
|
|
group="events"
|
|
itemKey="id"
|
|
@change="handleChange">
|
|
<template #item="{ element, index }">
|
|
<div class="list-group-item text-center bg-slate-400" @click="() => handleClick(index)">{{ element.title }}</div>
|
|
</template>
|
|
</draggable>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |