当前位置：首页 > news >正文

TodoList（Vue前端经典项目）

news 2025/8/24 11:32:08

TodoList主要是包含了CRUD功能，本地存储功能（loaclStorage）

总结：

全选按纽可以通过forEach循环来讲数据中的isCheck中的false

删除实现就通过传递id，然后根据filter循环将符合条件的数据返回成数组，然后将返回值赋给原数据

时间的获取可以通过dayjs插件来获取：

首先 npm install dayjs -s来安装插件

然后在组件中通过import dayjs from 'dayjs'来导入插件

最后通过dayjs(new Date).format('YY-MM-DD HH:MM')来获取时间

随机数的获取

 randomId(){return Number(Math.random().toString().substring(2,0)+Date.now()).toString(10)},

在CSS中有个知识点可以参考：将元素居中使用如下的办法：

position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);

获取input框的焦点：当我们点击添加按钮后，需要将光标放置到input框中，这时我们需要聚焦

首先在input框中添加ref属性

<input  type="text" ref="inputBox">

b. 然后在添加按钮中添加聚焦的方法

   const inputLenth = this.todoList.length - 1 console.log(inputLenth);this.$nextTick(()=>{this.$refs.inputBox[inputLenth].focus()})

在这段代码中需要注意的是我们要获取的是数组中最后一条数据，因为index下标从0开始，所以记着给length-1

本地存储则是通过localStorage.getItem和localStorage.setItem来实现

HTML代码：

<template><div class="todoListBox"><div class="header"><div class="header_left"><div>+</div><h2>Todo List</h2></div><div class="header_right"><button class="allBtn" @click="allSelect">全选</button><button class="addBtn" @click="addText">添加</button></div></div><div class="container"><div class="container_item" v-for="(item,index) in todoList" :key="item.id"><!-- 选中 --><div class="container_left" @click="selectText(item.id,index)"><span :style="item.isCheck?'opacity:1':'opacity:0'"></span></div><!-- 输入框 --><input type="text" v-model="item.content":disabled="item.isCheck":class="item.isCheck ? 'line-through': ''"@blur="handleInput"ref="inputBox"><!-- info --><div class="container_right"><!-- 时间 --><p>{{item.time}}</p><button @click="delText(item.id)">删除</button></div></div></div></div>
</template>

JS代码

<script>
import dayjs from 'dayjs'
export default {data(){return{todoList:[]}},created(){let newList = JSON.parse(window.localStorage.getItem('TodoList'))if(newList === null){this.todoList = [{id:this.randomId(),content:'请点击上方的添加按钮添加事件',isCheck:false,time:dayjs(new Date).format('YY-MM-DD HH:mm')}]}else{this.todoList = newList}},methods:{allSelect(){this.todoList.forEach(item=>{item.isCheck = !item.isCheck})this.storage()},addText(){this.todoList.unshift({id:this.randomId(),isCheck:false,content:'',time:dayjs(new Date).format('YY-MM-DD HH:mm')})const inputLenth = this.todoList.length - 1 console.log(inputLenth);this.$nextTick(()=>{this.$refs.inputBox[inputLenth].focus()})},delText(id){const result = this.todoList.filter(function(item){return item.id !=id})this.todoList = resultthis.storage()},//选中功能selectText(id,index){const doneItem = this.todoList.find(item=>item.id == id)doneItem.isCheck  = !doneItem.isCheckthis.storage()},//判断是否完成输入handleInput(){this.storage()},//生成随机IdrandomId(){return Number(Math.random().toString().substring(2,0)+Date.now()).toString(10)},storage(){window.localStorage.setItem('TodoList',JSON.stringify(this.todoList))}},}
</script>

CSS代码

<style lang="scss" scoped>
button{padding: 5px 10px;border: none;border-radius: 5px;color: #fff;margin-left: 10px;}.todoListBox{width: 800px;height: 600px;background-color: #3C3E4F;border-radius: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);padding: 20px;box-sizing: border-box;color: white;.header{display: flex;flex-direction: row;justify-content: space-between;align-items: center;.header_left{display: flex;flex-direction: row;justify-content: space-between;align-items: center;div{width: 50px;height: 50px;line-height: 50px;border-radius:50% ;background-color: #9999E6;font-size: 30px;text-align: center;margin-right: 15px;}}.header_right{.allBtn{background: #c43F38;}.addBtn{background:#70B870 ;}}}.container{margin-top: 20px;height: 450px;overflow-y: scroll;.container_item{width: 100%;display: flex;justify-content: space-between;align-items: center;background-color: #686F7D;border-radius:8px ;padding:10px 20px;box-sizing: border-box;margin-top:20px ;.container_left{width: 30px;height: 30px;border: 1px solid #ccc;border-radius: 50%;position: relative;span{display: inline-block;width: 25px;height: 25px;background-color: #9999E6;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}}.line-through{color: rgba(255,255,255,0.5);text-decoration: line-through rgba(142, 3, 3, 0.841);}.container_right{display: flex;align-items: center;button{background-color: red;}}input[type='text']{flex: 1;margin: 0 10px;outline: none;// 背景设置透明background: transparent;border: none;border-bottom: 1px solid #ccc;padding: 5px 10px;color: #ccc;}}}}
</style>

查看全文

http://www.lryc.cn/news/16744.html