init

src/components/EventRepo.vue

@@ -0,0 +1,41 @@
+<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>