Vue实现办公todolist

实现效果图
在这里插入图片描述

实现功能

在input输入要输入的内容回车（enter）后把内容添加到未完成中
动态计算有几个未完成的任务
点击未完成的复选框到已经完成中点击已完成的复选框回到未完成
双击列表中的内容，可对列表内容进行编辑在编辑完成后，按回车enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取消编辑还是之前的值
已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（本地存储）

input输入区域

 <!-- 头部 -->
    <header>
      <!-- 头部内容 -->
      <div class="todolist">
        <div>ToDoList</div>
        <div>
          <input type="text" placeholder="添加ToDo" v-model="inputValue" @keydown.enter="submit" />
        </div>
      </div>
    </header>

已完成未完成区域

<!-- 留言内容 -->
    <div class="todolist_item">
      <!-- 未完成 -->
      <div class="todolist_item_no">
        <div>正在进行</div>
        <div>({{noList}})</div>
      </div>
      <ul class="todolist_item_text">
        <li v-for="(item,index) in ToDoList" :key="index" v-show="!item.switch">
          <!-- 复选框 -->
          <input type="checkbox" @click.prevent="checked(item,true)" />
          <!-- 双击出现input -->
          <span v-if="index !=Listindex" @dblclick="updata(item,index)">{{item.val}}</span>
          <input
            type="text"
            v-if="index ==Listindex"
            @keydown.enter="seveData"
            v-model="item.val"
            @blur="seveData"
            @keydown.esc="saveList(item)"
          />
          <button class="todolist_button" @click="deletd(index)">删除</button>
        </li>
      </ul>

      <!-- 已完成 -->
      <div class="todolist_item_no">
        <div>已经完成</div>
        <div>({{yesList}})</div>
      </div>
      <ul class="todolist_item_text">
        <li v-for="(item,index) in ToDoList" :key="index" v-show="item.switch">
          <!-- 复选框 -->
          <input type="checkbox" checked @click.prevent="checked(item,false)" />
          <!-- 双击出现input -->
          <span v-if="index !=Listindex" @dblclick="updata(item,index)">{{item.val}}</span>
          <input
            type="text"
            v-if="index ==Listindex"
            @keydown.enter="seveData"
            v-model="item.val"
            @blur="seveData"
            @keydown.esc="saveList(item)"
          />
          <button class="todolist_button" @click="deletd(index)">删除</button>
        </li>
      </ul>
    </div>

操作方法事件 js代码部分

<script>
export default {
  data() {
    return {
      inputValue: "", //input中的值
      ToDoList: [],  //放input中的值
      Listindex: -1, //防止点击input显示两个
      saveToList: "" //esc之后值还是之前的
    };
  },
  created() {
    if (localStorage.ToDoList !== undefined) {
      this.ToDoList = JSON.parse(localStorage.ToDoList);
    }
  },
  computed: {
    noList() {
      let count = 0;
      this.ToDoList.map(a => {
        if (!a.switch) {
          count++;
        }
      });
      return count;
    },
    yesList() {
      let count = 0;
      this.ToDoList.map(a => {
        if (a.switch) {
          count++;
        }
      });
      return count
    }
  },
  // 定义属性和方法
  methods: {
    submit() {
      this.ToDoList.push({
        val: this.inputValue,
        switch: false
      });
      this.inputValue = "";
      this.save();
    },
    // 复选框
    checked(item, check) {
      if (check) {
        item.switch = true;
      } else {
        item.switch = false;
      }
      this.save();
    },
    // 删除
    deletd(index) {
      this.ToDoList.splice(index, 1);
      this.save();
    },
    // 双击显示input
    updata(item, index) {
      // esc后
      this.saveToList = item.val;

      this.Listindex = index;
    },
    // 回车改变值
    seveData() {
      this.save();
      // 回车后变成没有要修改的
      this.Listindex = -1;
    },
    // esc键输入的值不修改
    saveList(item) {
      item.val = this.saveToList;
      this.save();
      // 变成没有要修改的
      this.Listindex = -1;
    },
    // 封装本地同步方法
    save() {
      localStorage.ToDoList = JSON.stringify(this.ToDoList);
    }
  }
};
</script>

css部分自己写吧哈哈哈哈哈哈哈哈

Vue实现办公todolist

猜你喜欢