day49:ToDoList:待办清单

README.md

@@ -52,3 +52,4 @@
 - **day46:Quiz App:问答框**
 - **day47:Testimonial Box Switcher:简介卡片**
 - **day48:Random Image Feed:随机图片+懒加载**
+- **day49:ToDoList:待办清单**

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.1.2",
+    "nanoid": "^4.0.0",
     "vue": "^3.2.37",
     "vue-lazyload": "^3.0.0-rc.2",
     "vue-router": "^4.1.5",

src/router/index.js

@@ -5,7 +5,7 @@ export const router = createRouter({
   routes: [
     {
       path: "/",
-      redirect: "/day48",
+      redirect: "/day49",
     },
     {
       path: "/day01",
@@ -391,12 +391,12 @@ export const router = createRouter({
         import("../views/Day47_TestimonialBoxSwitcher/Index.vue"),
     },
     {
-      path: "/day48",
-      name: "day48",
+      path: "/day49",
+      name: "day49",
       meta: {
-        title: "Random Image Feed",
+        title: "ToToList",
       },
-      component: () => import("../views/Day48_RandomImageFeed/Index.vue"),
+      component: () => import("../views/Day49_ToDoList/Index.vue"),
     },
   ],
 })

src/views/Day49_ToDoList/Index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="body">
+    <h1>todos</h1>
+    <form id="form" @submit.prevent="addToDoItem">
+      <input type="text" class="input" placeholder="Enter your todo" autocomplete="off" ref="input"
+        v-model.trim.lazy="todo" />
+
+      <ul class="todos" id="todos">
+        <li :class="[todo.haveDone ? 'completed' : '']" v-for="todo in todoList" :key="todo.id"
+          @click="doneItem(todo.id)" @contextmenu.prevent="delItem(todo.id)">{{ todo.text }}
+        </li>
+      </ul>
+    </form>
+    <small>Left click to toggle completed. <br />
+      Right click to delete todo</small>
+  </div>
+</template>
+
+<script setup>
+import { nanoid } from 'nanoid'
+const input = ref()
+const todoList = ref([])
+const todo = ref("")
+
+onMounted(() => {
+  todoList.value = JSON.parse(getToDoList()) || []
+})
+
+// 添加事项
+const addToDoItem = (e) => {
+  if (todo.value) {
+    let todoItem = reactive({
+      id: nanoid(),
+      haveDone: false,
+      text: todo.value
+    })
+    todoList.value.push(todoItem)
+    setToDoList()
+    todo.value = ""
+    input.value.value = ""
+  }
+}
+
+// 完成事项
+const doneItem = (id) => {
+  todoList.value.forEach(item => {
+    if (item.id === id) {
+      item.haveDone = !item.haveDone
+    }
+  })
+  setToDoList()
+}
+
+// 删除事项
+const delItem = (id) => {
+  todoList.value = todoList.value.filter(item => item.id != id)
+  setToDoList()
+}
+
+const setToDoList = () => {
+  localStorage.setItem("todolist", JSON.stringify(todoList.value))
+}
+
+const getToDoList = () => {
+  return localStorage.getItem("todolist")
+}
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss"
+</style>

src/views/Day49_ToDoList/index.scss

@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+
+.body {
+  background-color: #f5f5f5;
+  color: #444;
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+
+  h1 {
+    color: rgb(179, 131, 226);
+    font-size: 10rem;
+    margin: 10px 0;
+    text-align: center;
+    opacity: 0.4;
+  }
+
+  form {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    width: 400px;
+
+    .input {
+      border: none;
+      color: #444;
+      font-size: 2rem;
+      padding: 1rem 2rem;
+      display: block;
+      width: 100%;
+
+      &::placeholder {
+        color: #d5d5d5;
+      }
+
+      &:focus {
+        outline-color: rgb(179, 131, 226);
+      }
+    }
+
+    .todos {
+      background-color: #fff;
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+
+      li {
+        border-top: 1px solid #e5e5e5;
+        cursor: pointer;
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+
+        &.completed {
+
+          color: #b6b6b6;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+
+  small {
+    color: #b5b5b5;
+    margin-top: 3rem;
+    text-align: center;
+  }
+}