JavaScript

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

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

前言

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

Todo List GitHub代码库

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

本次《todo list: Vue待办事项任务管理》,分为一下章节,有兴趣的同学可以持续关注。

第一章: 初识(项目搭建、基本功能组件实现)
第二章: 数据动态化处理(localStorage + Vuex),可新增,可编辑
第三章:待办事项自定义分组
第四章:待办事项添加描述图片等信息
第五章:可线上操作,入库Mysql
第六章:多人协同处理待办事项,权限管理
第七章:完结:线上发布

初步定义7个章节,实际开发中有可能有所增减。

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。

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

预览图

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

Todo List GitHub代码库

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

this is a cache: 0.00612