Todo List: 待办事项自定义分组 – 第三章
Todo List: 待办事项自定义分组 - 第三章
前言
有了前面2章节的内容，相信小伙伴们自己也可以试着写写了，动手后的你们是不是发现很简单了？现在我们继续下一章节的内容，自定义任务分组。
Todo List: 待办事项自定义分组 - 第三章
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: 待办事项自定义分组 - 第三章
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年5月28日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录