Vue/todos/src/components/TodoList.vue

<template>
  <div class="tdContainer">
    <ul class="tdList">
      <li
        class="tdItem"
        v-for="(item, index) in todos"
        :key="item.id"
        draggable="true"
        @dragstart="onDragStart(index)"
        @dragover.prevent="onDragOver(index)"
        @drop="onDrop(index)"
      >
        <div class="tdItem-main">
          <input type="checkbox" v-model="item.completed" class="toToggle" />

          <!-- <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">
          <a @click="delTodo(item)">删除</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["todos"],
  data() {
    return {
      editingId: null,
      editText: "",
      dragIndex: null,
    };
  },
  methods: {
    delTodo(item) {
      this.$emit("delTodo", item);
    },
    onDragStart(index) {
      this.dragIndex = index;
    },
    onDragOver(index) {},
    onDrop(index) {
      if (this.dragIndex === null || this.dragIndex === index) return;
      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>

<style scoped>
.tdContainer {
  margin-top: 20px;
}

.tdList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tdItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
  transition: 0.2s;
}

.tdItem:hover {
  background: #fafafa;
}

.toToggle {
  margin-right: 10px;
}

.tdItem-main {
  display: flex;
  align-items: center;
}

.tdTxt {
  font-size: 16px;
  transition: 0.3s;
}

.completed {
  text-decoration: line-through;
  color: #999;
}

.tdItem-acts a {
  color: #ff4d4f;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
}

.tdItem:hover .tdItem-acts a {
  opacity: 1;
}

.tdItem-acts a:hover {
  text-decoration: underline;
}

.tdList {
  list-style: none;
  padding: 0;
}

.tdItem {
  display: flex;
  justify-content: space-between;
  padding: 8px;
}

.completed {
  text-decoration: line-through;
  color: gray;
}

.editInput {
  font-size: 16px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}
</style>