使用vue3完成todolist案例

电玩女神 2022-12-29 14:04 212阅读 0赞

### 使用vue3完成todolist案例 ###

*   *   *  介绍
         *  遇到的问题
         *  base.css
         *  存储工具类
         *  定义类型
         *  app.vue
         *  Header.vue
         *  List.vue
         *  Item.vue
         *  Footer.vue

### 介绍 ###

*  [尚硅谷2021最新Vue.JS教程快速入门到项目实战（Vue3/VueJS技术详解）][2021_Vue.JS_Vue3_VueJS]
 *  [Vue3+TS 快速上手][Vue3_TS]

组件层次关系  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]  
页面效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 1]

### 遇到的问题 ###

*  ESLint 规则: eslint-disable vue/no-mutating-props  
    源代码

[按照规则修改][Link 1]

### base.css ###

*  在index.html 引入的页面基本样式 base.css

body { 
      background: #fff;
    }
    
    .btn { 
      display: inline-block;
      padding: 4px,12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0 , 0.05) ;
      border-radius: 4px;
    }
    
    .btn-danger { 
      color: #fff;
      background-color: #da4f49;
      border: 1px solid #bd362f;
    }
    
    .btn-danger:hover { 
      color: #fff;
      background-color: #bd362f;
    }
    
    .btn:focus { 
      outline: none;
    }

### 存储工具类 ###

*  localStorageUtil.ts

// 保存数据到浏览器的缓存中
    export function saveArray(key: string,value: []) { 
      localStorage.setItem(key,JSON.stringify(value))
    }
    export function readArray(key: string){ 
      return JSON.parse(localStorage.getItem(key)|| '[]')
    }

### 定义类型 ###

*  todo.ts

// 定义一个接口，约束state的数据类型
    export interface Todo { 
      id: number,
      title: string,
      isCompleted: boolean
    }

### app.vue ###

<template>
      <div class="todo-container">
        <div class="todo-wrap">
          <Header :addTodo="addTodo" />
          <List :todos = "todos" :delTodo = "delTodo" :updateTodo = "updateTodo" />
          <Footer :todos = "todos" :checkAll ="checkAll" :clear = "clearAllCompletedTodos"/>
        </div>
      </div>
    </template>
    <script lang='ts'> import { defineComponent, onMounted, reactive, toRefs, watch } from "vue"; import Header from './components/Header.vue' import List from './components/List.vue' import Footer from './components/Footer.vue' import { Todo} from './type/todo' import { saveArray, readArray } from './utils/localStorageUtil' export default defineComponent({ name: "App", components: { Header, List, Footer }, setup() { // const state = reactive<{todos: Todo[]}>({ // todos: [ // {id:1,title: '记单词',isCompleted: false}, // {id:2,title: '编程',isCompleted: true} // ] // }) const state = reactive<{ todos: Todo[]}>({ todos: [] }) const key = 'todos_key' // 界面加载完毕后过一会后再读取数据 onMounted(()=>{ setTimeout(()=>{ state.todos = readArray(key) },1000) }) const addTodo = (todo: Todo) => { state.todos.unshift(todo) } // 添加数组的方法，放在数组头部 const delTodo = (index: number) => { state.todos.splice(index,1) } // 删除数据 const updateTodo = (todo: Todo, isComplete: boolean) => { todo.isCompleted = isComplete } // 修改todo的isCompleted属性的状态，属性的修改应该让父组件来决定 const checkAll = (isComplete: boolean)=>{ state.todos.forEach(todo => { todo.isCompleted = isComplete }) } const clearAllCompletedTodos = ()=> { state.todos = state.todos.filter(todo=>!todo.isCompleted) } // 监视操作: 如果todos数组的数据变化了，直接存储到浏览器的缓存中 // watch(()=>state.todos,(value)=>{ // localStorage.setItem('todos_key',JSON.stringify(value)) // },{deep:true}) watch(()=>state.todos,(value: Todo [])=>{ saveArray(key, value as []) },{ deep:true}) return { ...toRefs(state), addTodo, delTodo, updateTodo, checkAll, clearAllCompletedTodos } } }); </script>
    <style scoped> .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

### Header.vue ###

<template>
      <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keydown.enter="add" v-model="title">
      </div>
    </template>
    <script lang='ts'> import { defineComponent, ref} from 'vue' export default defineComponent({ name: 'Header', props: { addTodo: { type: Function, require: true // 必须要传 } }, setup(props) { const title = ref('') const add = () => { `` if (!title.value.trim()) return; props.addTodo?.({ id: Date.now(), title: title.value, isCompleted: false }) title.value = '' } return { title, add, } } }) </script>
    <style scoped> .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; } .todo-header input:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } </style>

### List.vue ###

<template>
      <ul class="todo-main">
        <Item v-for="(todo, index) in todos " :key="todo.id" :todo="todo" :delTodo="delTodo" :index="index" :updateTodo="updateTodo"/>
      </ul>
    </template>
    <script lang='ts'> import { defineComponent} from 'vue' import Item from './Item.vue' export default defineComponent({ name: 'List', components: { Item }, props: ['todos', 'delTodo', 'updateTodo'] }) </script>
    <style scoped> .todo-main { margin-left: 0; border: 1px solid #ddd; border-radius: 2px; padding: 0; } .todo-empty{ height: 40px; line-height: 20px; border: 1px solid #ddd; border-radius: 2px; padding-left: 5px; margin-top: 10px; } </style>

### Item.vue ###

/* eslint-disable vue/no-mutating-props */
    <template>
      <li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{ backgroundColor:bgColor,color:myColor}" >
        <label >
          <input type="checkbox" v-model="isComplete" />
          <span> {
       {todo.title}}</span>
        </label>
        <button class="btn btn-danger" v-if="isShow" @click="del">删除</button>
      </li>
    </template>
    <script lang='ts'> import { computed, defineComponent, ref } from "vue"; import { Todo } from "../type/todo" export default defineComponent({ name: "Item", props: { todo: { type: Object as () => Todo, required: true }, delTodo: { type: Function, required : true }, index: { type: Number, required: true }, updateTodo: { type: Function, required: true } }, setup(props) { const bgColor = ref('white') // 背景色 const myColor = ref('black') // 字体颜色 const isShow = ref(false) // 按钮默认不显示 const mouseHandler = (flag: boolean)=> { if (flag) { bgColor.value = 'pink' myColor.value = 'green' isShow.value = true } else { bgColor.value = 'white' myColor.value = 'black' isShow.value = false } } const del = () => { if (window.confirm("是否输出该任务")) { props.delTodo?.(props.index) } } const isComplete = computed({ get() { return props.todo.isCompleted }, set(val: boolean) { props.updateTodo?.(props.todo, val) } }) // 利用计算属性的方式 来让当前的复选框选中/不选中 return { bgColor, myColor, isShow, mouseHandler, del, isComplete } } }); </script>
    <style scoped> li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { float:right; margin-top: 3px; } li::before { content: initial; } li:last-child { border-bottom: none; } </style>

### Footer.vue ###

<template>
      <div class="todo-footer">
        <label>
          <input type="checkbox" v-model="isCheckAll"/>
        </label>
        <span>
          <span>已完成{
       {count}}</span> / 全部{
       {todos.length}}
        </span>
        <button class="btn btn-danger" @click="delAll">清除已完成的任务</button>
      </div>
    </template>
    <script lang='ts'> import { Todo } from "@/type/todo"; import { computed, defineComponent } from "vue"; export default defineComponent({ name: "Footer", props: { todos: { type: Array as () => Todo[], required: true }, checkAll: { type: Function, required: true }, clear: { type: Function, required: true } }, setup(props) { const count = computed(()=>{ return props.todos?.reduce((pre,todo)=>pre+(todo.isCompleted?1:0),0) }) const isCheckAll = computed({ get() { return count.value>0 && props.todos.length === count.value }, set(val) { props.checkAll(val) } }) const delAll = ()=>{ if (window.confirm("是否清除已完成的任务")) { props.clear() } } return { count, isCheckAll, delAll } } }); </script>
    <style scoped> .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -1px; vertical-align: middle; margin-right: 5px; } .todo-footer button { float: right; margin-top: 5px; } </style>

[2021_Vue.JS_Vue3_VueJS]: https://www.bilibili.com/video/BV1ra4y1H7ih
[Vue3_TS]: https://24kcs.github.io/vue3_study/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]: /images/20221120/3487d5f233d44ddc86422659c9aa2cfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201223104149995.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw,size_16,color_FFFFFF,t_70
[Link 1]: https://eslint.vuejs.org/rules/no-mutating-props.html