feat:edit_todos

todos/src/App.vue

@@ -51,6 +51,11 @@ export default {
       this.todos = this.todos.filter((t) => t.id !== item.id);
     },
 
+    editTodo({ item, text }) {
+      item.txt = text;
+      console.log("编辑 Todo:", item);
+    },
+
     toggleTodo(item) {
       console.log("完成状态切换:", item);
     },
@@ -75,7 +80,7 @@ export default {
 
 <template>
   <TodoHeader @addTodo="addTodo" />
-  <TodoList :todos="todoList" @delTodo="delTodo" @move="moveTodo" />
+  <TodoList :todos="todoList" @delTodo="delTodo" @move="moveTodo" @edit="editTodo"/>
   <TodoFooter
     :count="todoList.length"
     :tabType="tabType"

todos/src/components/TodoList.vue

@@ -13,9 +13,27 @@
         <div class="tdItem-main">
           <input type="checkbox" v-model="item.completed" class="toToggle" />
 
-          <span class="tdTxt" :class="{ completed: item.completed }">
+          <!-- <span class="tdTxt" :class="{ completed: item.completed }"> -->
+          <!--   {{ item.txt }} -->
+          <!-- </span> -->
+          <span
+            v-if="editingId !== item.id"
+            class="tdTxt"
+            :class="{ completed: item.completed }"
+            @dblclick="startEdit(item)"
+          >
             {{ item.txt }}
           </span>
+
+          <input
+            v-else
+            class="editInput"
+            v-model="editText"
+            @keyup.enter="confirmEdit(item)"
+            @blur="confirmEdit(item)"
+            @keyup.esc="cancelEdit"
+            autofocus
+          />
         </div>
 
         <div class="tdItem-acts">
@@ -99,12 +117,24 @@
   text-decoration: line-through;
   color: gray;
 }
+
+.editInput {
+  font-size: 16px;
+  padding: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
 </style>
 
 <script>
 export default {
   props: ["todos"],
-
+  data() {
+    return {
+      editingId: null,
+      editText: "",
+    };
+  },
   methods: {
     delTodo(item) {
       this.$emit("delTodo", item);
@@ -118,6 +148,22 @@ export default {
       this.$emit("move", { oldIndex: this.dragIndex, newIndex: index });
       this.dragIndex = null;
     },
+    startEdit(item) {
+      this.editingId = item.id;
+      this.editText = item.txt;
+    },
+
+    confirmEdit(item) {
+      const text = this.editText.trim();
+      if (text) {
+        this.$emit("edit", { item, text });
+      }
+      this.editingId = null;
+    },
+
+    cancelEdit() {
+      this.editingId = null;
+    },
   },
 };
 </script>