vue3+ts实现todolist功能

朱雀 2022-09-09 09:18 303阅读 0赞

先看一下实现效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARE9N5pu854-g5rKZ5Y2O_size_20_color_FFFFFF_t_70_g_se_x_16][]

可以看到内部实现的内容有enter输入，单项删除，全选，以及删除选中项等功能

具体在实现前需要常见有ts的vue3项目

## **项目创建** ##

具体项目创建 就是 vue create 项目名称

在创建后，选择的时候有vue2和vue3的选择，第三项是自定义，在自定义时需要选中ts(选择的键分别是向下键和空格键)

在创建项目之后，先运行，查看是否可运行

## TodoList实现 ##

目录结构：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARE9N5pu854-g5rKZ5Y2O_size_6_color_FFFFFF_t_70_g_se_x_16][]

运行文件：App.vue

组件：components下的文件

配置文件：utils   types

文件内容按上述介绍展示：

App.vue

<template>
      <div class="todo-container">
        <div class="todo-wrap">
         <Header :addTodo="addTodo"/>
         <List :todos='todos' :deleteTodo="deleteTodo" :updateTodo="updateTodo"/>
         <Footer :todos="todos" :checkAll="checkAll" :clearAllCompletedTodos="clearAllCompletedTodos"/>
        </div>
      </div>
    </template>
    
    <script lang='ts'>
    import { defineComponent,reactive,toRefs,watch,onMounted } from 'vue'
    // 引入直接的子集组件
    import Header from './components/Header.vue'
    import List from './components/List.vue'
    import Footer from './components/Footer.vue'
    import {Todo } from './types/todo'
    import {saveTodos, readTodos} from './utils/localStorageUtils'
    
    export default defineComponent({
      name:'App',
      components: {
        Header,
        List,
        Footer
      },
      // 数据存储为数组格式，数组内的为对象，对象中有三个属性（id, title, isSCompleted）
      // 把数据定义到App.vue父级组件
      setup(){
        // 定义一个数组数据
        // const state = reactive<{todos: Todo[]}>({
        //   todos: [
        //     {id: 1,title:'奔驰',isCompleted: false},
        //     {id: 2,title:'宝马',isCompleted: true},
        //     {id: 3,title:'奥迪',isCompleted: false},
        //   ]
        // })
        const state = reactive<{todos: Todo[]}>({
          todos: []
        })
        // 界面加载完毕后再读取数据
        onMounted(() => {
          setTimeout(() => {
            state.todos = readTodos()
          },1000)
        })
    
        // 添加数据的方法
        // eslint-disable-next-line
        const addTodo = (todo:Todo) => {
          state.todos.unshift(todo)
        }
    
        // 删除数据的方法
        const deleteTodo = (index:number) =>{
          state.todos.splice(index, 1)
        }
    
        // 修改todod的 isCompleted属性的状态
        const updateTodo = (todo: Todo,isCompleted: boolean) => {
          todo.isCompleted = isCompleted
          console.log(todo);
        }
        // 全选或者全不选的方法
        const checkAll = (isCompleted:boolean) => {
          // 遍历数组
          state.todos.forEach((todo) => {
            todo.isCompleted = isCompleted
          });
        }
        // 清理所有选中的数据
        const clearAllCompletedTodos = () => {
          state.todos = state.todos.filter(todo=>!todo.isCompleted)
        }
    
        // 监视操作：如果todos数组的数据变化了，直接存储到浏览器的缓存中
        // watch(() => state.todos, (value)=> {
        //   // 保存到浏览器缓存中
        //   localStorage.setItem('todos_key',value)
        // },{deep:true})
    
        // watch(() => state.todos, (value)=> {
        //   // 保存到浏览器缓存中
        //   saveTodos(value)
        // },{deep:true})
    
        watch(() => state.todos, saveTodos, {deep:true})
        return {
          ...toRefs(state),
          addTodo,
          deleteTodo,
          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>

components 下的 Header.vue

<template>
      <div class="todo-header">
        <input type="text" placeholder='请输入你的任务名称，按回车键确认' @keyup.enter='add' v-model='title'>
      </div>
    </template>
    
    <script lang='ts'>
    import { defineComponent,ref } from 'vue'
    
    export default defineComponent({
      name:'Header',
      props: {
        addTodo: {
          type: Function,
          required: true    // 必须
        }
      },
      setup(props){
        // 定义一个ref类型的数据
        const title = ref('')
        // 回车的事件回调函数，用来添加数据
        const add = () => {
          // 获取文本框中输入的数据，判断不能为空
          const text = title.value
          if(!text.trim()) return
          //此时有数据，创建一个todo对象
          const todo = {
            id: Date.now(),
            title: text,
            isCompleted: false
          }
          // 调用方法addTodo方法
          props.addTodo(todo)
          // 情况文本框
          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>

components 下的 List.vue

<template>
      <ul class="todo-main">
        <Item v-for="(todo, index) in todos" :key="todo.id" :index="index" :todo='todo' :deleteTodo="deleteTodo" :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','deleteTodo','updateTodo']
    })
    </script>
    
    <style scoped>
    .todo-main{
      margin-left: 0px;
      border: 1px solid #ddd;
      border-radius: 2px;
      padding: 0px;
    }
    .todo-empty{
      height: 40px;
      line-height: 40px;
      border: 1px solid #ddd;
      border-radius: 2px;
      padding-left: 5px;
      margin-top: 10px;
    }
    </style>

components 下的 Item.vue

<template>
      <li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{backgroundColor:bgColor,color:myColor}">
        <label>
          <input type='checkbox' v-model='isCom'/>
          <span>{
       {todo.title}}</span>
        </label>
        <button class='btn btn-danger' v-show="isShow" style='display;none' @click="delTodo">删除</button>
      </li>
    </template>
    
    <script lang='ts'>
    import { defineComponent,ref, computed } from 'vue'
    import {Todo} from '../types/todo'
    
    export default defineComponent({
      name:'Item',
      // props: {
      //   todo: Object as () => Todo  // 函数返回的是Todo类型
      // },
      props: {
        todo: {
          type: Object as () => Todo,  // 函数返回的是Todo类型
          required: true
        },
        deleteTodo: {
          type: Function,
          required: true
        },
        index: {
          type: Number,
          required: true
        },
        updateTodo: {
          type: Function,
          required: true
        }
      },
      data(){
        return {
          
        }
      },
      // computed: {
      //   isCom () {
      //     return this.todo.isCompleted 
      //   }
      // },
      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 = 'white'
            isShow.value = true
          }else{
            // 鼠标离开
            bgColor.value = 'white'
            myColor.value = 'black'
            isShow.value = false
          }
        }
        // 删除数据的方法
        const delTodo = () => {
          if(window.confirm('确定要删除吗？')){
            props.deleteTodo(props.index)
          }
        } 
        // 计算属性方式---让当前复选框选中
        const isCom = computed({
          get(){
            return props.todo.isCompleted
          },
          set(val){
            props.updateTodo(props.todo, val)
          }
        })
        return {
          mouseHandler,
          bgColor,
          myColor,
          isShow,
          delTodo,
          isCom
        }
      }
    })
    </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;
      /* display: none; */
      margin-top: 3px;
    }
    li:before{
      content: initial;
    }
    li:last-child{
      border-bottom: none;
    }
    </style>

components 下的 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="clearAllCompletedTodos">清除已完成任务</button>
      </div>
    </template>
    
    <script lang='ts'>
    import { defineComponent,computed } from 'vue'
    import {Todo} from '../types/todo'
    
    export default defineComponent({
      name:'Footer',
      props: {
        todos:{
          type: Array as ()=> Todo[],
          required: true
        },
        checkAll: {
          type: Function, 
          required: true
        },
        clearAllCompletedTodos: {
          type: Function, 
          required: true
        }
      },
      setup(props){
        // 已完成的计算属性操作
        const count = computed(()=>{
          return props.todos.reduce((pre,todo,index)=>pre+(todo.isCompleted?1:0),0)
        })
        const isCheckAll = computed({
          get(){
            return count.value>0&&props.todos.length===count.value
          },
          set(val){
            props.checkAll(val)
          }
        })
        return {
          count,
          isCheckAll
        }
      }
    })
    </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>

types 下的  todo.ts

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

utils下的  localStorageUtils.ts

import {Todo} from '../types/todo'
    
    // 保存数据到浏览器的缓存中
    export function saveTodos(todos:Todo[]){
      localStorage.setItem('todos_key',JSON.stringify(todos))
    }
    
    // 从浏览器缓存读取数据
    export function readTodos():Todo[]{
      return JSON.parse(localStorage.getItem('todos_key') || '[]')
    }

完

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARE9N5pu854-g5rKZ5Y2O_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/23ac0e39e26c4e67af43137e9e64c4b3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARE9N5pu854-g5rKZ5Y2O_size_6_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/7998a91424214636a48a20e143f410e9.png