TodoList（Vue前端经典项目）

最新推荐文章于 2024-07-20 18:16:53 发布

Miketutu

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量1.1k

点赞数

文章标签：前端 javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/Miketutu/article/details/129170664

版权

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 = result
      this.storage()
    },
    //选中功能
    selectText(id,index){
      const doneItem = this.todoList.find(item=>item.id == id)
      doneItem.isCheck  = !doneItem.isCheck
      this.storage()
    },
    //判断是否完成输入
    handleInput(){
      this.storage()
    },
    //生成随机Id
    randomId(){
      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>