专栏首页web秀Todo List: 待办事项自定义分组 – 第三章

Todo List: 待办事项自定义分组 – 第三章

Todo List: 待办事项自定义分组 - 第三章

前言

有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义任务分组

Todo List GitHub代码库

html页面调整

主要在todo-list.vue上面添加“新建分组按钮”和新增输入“分组名称”弹框。

<div class="todo-content">
  <div class="func-ment">
    <div class="li" @click="$refs.createGroupDialog.show()">新建分组</div>
  </div>
  <list :listData="todoData"></list>
  <c-dialog
    ref="createGroupDialog"
    title="新建任务"
    cancelBtn="取消"
    confirmBtn="确认"
    @confirm="confirmCreateGroup"
  >
    <div class="item-detail">
      <ul>
        <li class="dis-flex">
          <div class="w-80">分组名称</div>
          <div class="flex1">
            <input type="text" v-model="groupName">
          </div>
        </li>
      </ul>
    </div>
  </c-dialog>
</div>

对象弹框确认事件:

confirmCreateGroup () {
  this.$store.commit(types.M_CREATE_TODO_LIST_GROUP, {
    title: this.groupName,
    list: []
  })
}

store修改

这里store新增了M_CREATE_TODO_LIST_GROUP方法,所以去store/types.js添加:

export const M_CREATE_TODO_LIST_GROUP = 'M_CREATE_TODO_LIST_GROUP'

store/mutations.js内容:

[types.M_CREATE_TODO_LIST_GROUP] (state, data) {
  state.todoData.push(data)
  todoStorage.setTodoList = state.todoData
}

直接向state.todoDatapush传入的参数,也就是分组名称和分组任务的空数组。然后同步到Storage

这样就轻松完成了,任务分组。

预览图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

    在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => inde...

    Javanx
  • 纯CSS3实现loading虚影加载效果

    从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执...

    Javanx
  • Vue官方文档笔记

    当一个Vue实例(如上面的vm)被创建后,它将data对象里面的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”, 即视图展示...

    tandaxia
  • jquery

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    suwanbin
  • jQuery

    jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

    新人小试
  • jQueryEasyUI 的入门

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI拖动效果</title> <...

    用户5927264
  • Web前端学习笔记之jQuery基础

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    Jetpropelledsnake21
  • Web-第五天 BootStrap学习

    将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

    奋斗蒙
  • 框架的 总结(nop)------添加功能

    wfaceboss

扫码关注云+社区

领取腾讯云代金券