demo代码:https://github.com/zuxian/todolist
备忘录展示: fuzuxian.fun/todolist/dist/
-
1,组件一: 头部–标题;
-
2,组件二:脚部—一个简单链接;
<p><a v-bind:href="url" target="_blank">{{ footer }}</a></p>
data () {
return {
footer: '我的学习记录',
url: 'https://blog.csdn.net/image_fzx',
}
}
3,组件三additem.vue:点击添加新事件;
方法:addIt、addSubmit、clearAdd
<span v-show="!isAdding" class="add-item" v-on:click="addIt">{{ note }}</span>
<span v-show="isAdding" class="adding-item editing">
<input type="" name="" value="" v-model="addingDraft">
<button v-on:click="addSubmit()">确定</button>
<button v-on:click="clearAdd()">取消</button>
</span>
export default {
name: 'AddItem',
props: ['items','editingItem','editingValue'],
methods: {
addIt: function () {
this.isAdding = true;
this.$emit('clear-editing',{});
},
addSubmit: function () {
if (this.addingDraft.trim()) {
this.items.push({
value: this.addingDraft,
isDone: false,
isEditing: false,
});
this.isAdding = false;
this.addingDraft = "";
}
},
clearAdd: function () { this.isAdding = false; },
},
data () {
return {
note: "点击添加新计划 !",
isAdding: false,
addingDraft: "",
}
},
};
4,组件四appcontent.vue:
方法:
>clearAdding(取消添加)、
doneIt(完成)、deleteIt(删除)、
【editIt(编辑)==》:editSubmit(提交编辑)、clearEditing(取消编辑)】
<ul>
<li v-for="(item,index) in items">
<span v-show="!item.isEditing" v-bind:class="{ done: item.isDone}">
{{ index + 1 }}. {{ item.value }}</span>
<span v-show="item.isEditing" class="editing">
<input type="text" name="" v-model="item.value">
<button v-on:click="editSubmit(item)">确定</button>
<button v-on:click="clearEditing()">取消</button>
</span>
<button v-on:click="editIt(item)">编辑</button>
<button v-on:click="doneIt(item)" v-bind:class="{ doneBtn:item.isDone }">
<span v-show="item.isDone">恢复</span><span v-show="!item.isDone">完成</span>
</button>
<button v-on:click="deleteIt(index)">删除</button>
</li>
</ul>
export default {
name: 'AppContent',
props: ['items'],
methods: {
clearAdding: function () {
this.$emit('clear-adding', false);
},
doneIt: function (obj) {
obj.isEditing = false;
obj.isDone = !obj.isDone;
this.clearEditing();
this.clearAdding();
},
deleteIt: function (index) {
this.items.splice(index, 1);
this.clearEditing();
this.clearAdding();
},
editIt: function (obj) {
this.clearEditing(); // 这句要放前面
this.editingItem = obj; // 保存当前编辑的todo对象,该对象是一个引用值
this.editingValue = obj.value; // 保存修改前的内容,该字符串是一个原始值
obj.isEditing = true;
this.clearAdding();
},
editSubmit: function (obj) {
// 确认后,两个临时变量清空
this.editingItem = null;
this.editingValue = "";
if (obj.value.trim()) {
obj.isEditing = false;
}
},
clearEditing: function () {
// 如果取消了编辑,即没有正常保存,就不改变item值
if (this.editingItem) {
this.editingItem.isEditing = false;
this.editingItem.value = this.editingValue;
this.editingItem = null;
this.editingValue = "";
}
},
},
data () {
return {
editingItem: null,
editingValue: "",
}
},
};
APP.vue
<AppContent ref="content" v-bind:items="items"
v-on:clear-adding="clearAdding"> </AppContent>
<AddItem ref="addItem" v-bind:items="items"
v-on:clear-editing="clearEditingContent"> </AddItem>
clearEditingContent: function () {this.$refs.content.clearEditing(); // 执行函数 },
clearAdding: function ($event) {this.$refs.addItem.isAdding = $event; // 直接设定值 }