其实我觉得我跟todolist很有缘,在当时初接触php的时候,就学了一个用php写的todolist,现在写vue的时候,第一个练手的小项目也是todolist。
项目在线地址:https://zjzdmc.top/vue/todolist/#/
Github地址:https://github.com/datehoer/vue/tree/master/todolist

Todolist效果演示
上面的正在进行的任务是我写死的,这里可以修改成自己添加,不过我觉得还是写死比较好,因为我近期就这一个计划,然后设置了每天进行重置。

Todolist代码

<template>
    <div class="box">
        <div class="header">
            <h3>TodoList</h3>
            <span @click="reset" title="点击重置Todolist">Reset</span>
        </div>
        <div class="content">
            <div class="content_left content_box">
                <div class="todo titlebox">正在进行<span class="tasknum">{{todolist.length}}</span></div>
                <ul>
                    <li v-for="(item,index) in todolist" :key="index" :item="item" :index="index">
                        <span class="iconfont uncheck" @click="checkboxChange(index)">&#xe8bb;</span>
                        <p>{{item}}</p>
                        <a @click="tododel(index)">-</a>
                    </li>
                </ul>
            </div>
            <div class="content_right content_box">
                <div class="finish titlebox">已经完成<span class="tasknum">{{finishlist.length}}</span></div>
                <ul>
                    <li v-for="(item,index) in finishlist" :key="index" :item="item" :index="index">
                        <span class="iconfont checked" @click="uncheckboxChange(index)">&#xe8ad;</span>
                        <p>{{item}}</p>
                        <a @click="finishdel(index)">-</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</template>
<script>
export default {
  name: 'Todo',
  data() {
      return {
          todolist: ['6:30 起床', '6:40-7:00 洗漱10分钟,跑步10分钟', '7:10-7:30 吃饭','7:40-8:20 背单词','8:30-11:40 做训练','11:50-12:20 吃饭','12:20-13:00 午睡','13:00-17:00 做练习','17:00-17:30 跑步','17:30-18:00 吃晚饭','18:00-22:00 看书、做练习','22:00-23:00 锻炼、洗漱、洗澡','23:00-23:30 背单词','23:30-6:30 睡觉 (严格执行)'],
          finishlist: [],
          nowDate: 0
      }
  },
  methods: {
      checkboxChange(index) {
          this.finishlist.push(this.todolist[index])
          this.todolist.splice(index,1);
          this.save()
      },
      uncheckboxChange(index) {
          this.todolist.push(this.finishlist[index])
          this.finishlist.splice(index,1);
          this.save()
      },
      tododel(index) {
          this.todolist.splice(index,1);
          this.save()
      },
      finishdel(index) {
          this.finishlist.splice(index,1);
          this.save()
      },
      save() {
          let day = new Date().getDate();
          if(this.nowDate != day){
              this.nowDate = day
              this.todolist = ['6:30 起床', '6:40-7:00 洗漱,跑步', '7:10-7:30 吃饭','7:40-8:20 背单词','8:30-11:40 做训练','11:50-12:20 吃饭','12:20-13:00 午睡','13:00-17:00 做练习','17:00-17:30 跑步','17:30-18:00 吃晚饭','18:00-22:00 看书、做练习','22:00-23:00 锻炼,洗漱,洗澡','23:00-23:30 背单词','23:30-6:30 睡觉']
              this.finishlist = []
          }
          localStorage.setItem('todolist',JSON.stringify(this.todolist))
          localStorage.setItem('finishlist',JSON.stringify(this.finishlist))
          localStorage.setItem('nowDate',JSON.stringify(this.nowDate))
      },
      reset() {
          this.todolist = ['6:30 起床', '6:40-7:00 洗漱,跑步', '7:10-7:30 吃饭','7:40-8:20 背单词','8:30-11:40 做训练','11:50-12:20 吃饭','12:20-13:00 午睡','13:00-17:00 做练习','17:00-17:30 跑步','17:30-18:00 吃晚饭','18:00-22:00 看书、做练习','22:00-23:00 锻炼,洗漱,洗澡','23:00-23:30 背单词','23:30-6:30 睡觉']
          this.finishlist = []
          localStorage.setItem('todolist',JSON.stringify(this.todolist))
          localStorage.setItem('finishlist',JSON.stringify(this.finishlist))
      }
  },
  mounted() {
      if(localStorage.todolist){
          this.todolist = JSON.parse(localStorage.todolist)
      }
      if(localStorage.finishlist){
          this.finishlist = JSON.parse(localStorage.finishlist)
      }
      if(localStorage.nowDate){
          this.nowDate = JSON.parse(localStorage.nowDate)
      }
      this.save()
  }
}
</script>
<style scope>
    .box {
        font-size: 10%;
        display: flex;
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        user-select: none;
    }
    .box .header {
        width: 100%;
        text-align: center;
    }
    .box .header span {
        position: absolute;
        top: 1%;
        right: 1%;
        color: rgb(68, 163, 187);
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: yellow;
        border-radius: 10px;
        cursor: pointer;
    }
    .box .header span:hover {
        background-color: tomato;
    }
    .box .content {
        display: flex;
        width: 100%;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .box .content .content_box {
        width: 60%;
    }
    .box .content .content_box ul li {
        display: flex;
        height: 32px;
        line-height: 32px;
        background: #fff;
        position: relative;
        margin-bottom: 10px;
        padding: 0 45px;
        border-radius: 3px;
        border-left: 5px solid #629A9C;
        box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
        opacity: 0.7;
        justify-content: flex-start;
        align-items: center;
    }
    .box .content .content_box ul li .uncheck {
        position: absolute;
        top: 1px;
        left: 14px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }
    .box .content .content_box ul li .checked {
        position: absolute;
        top: 1px;
        left: 14px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }
    .box .content .content_box ul li a {
        position: absolute;
        top: 4px;
        right: 5px;
        display: inline-block;
        width: 14px;
        border-radius: 14px;
        border: 6px double #FFF;
        background: #2cb1e3;
        line-height: 14px;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
    .box .content .content_box .titlebox {
        position: relative;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .box .content .content_box .tasknum {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #E6E6FA;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
    }
</style>

项目我是通过vue-cli创建的,选择了router但是没有用上,并且我没有将内容进行拆分,其实可以拆成许多小的模板进行调用,但是没有拆。
其实这个小项目没有什么难度,只是练手而已,大家可以复制一下我的css样式,然后自己去简单敲一下就好了。

下面简单说一下如果不写死数据,我们在页面上写一个input框,然后加入回车事件,之后读取input框内的数据,将它push到todolist框内就可以了。

最后修改:2021 年 09 月 13 日 03 : 52 PM
如果觉得我的文章对你有用,请随意赞赏