1. When using update to change content, enter the field in the process of click enter, delete, space and other keys will automatically exit editing mode, is there any good way to solve this problem?
2. In addition, when deleting using delete, if the next line has content to expand, it will be automatically folded, how to solve this?
the specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: -sharp444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
<span v-if="up">{{ model.name }}</span>
<input v-else type="text" v-model="model.name" @click.stop>
<span v-if="isFolder">[{{ open ? "-" : "+" }}]</span>
<span class="bold" @click.stop="$emit("del", index)">[del]</span>
<span class="bold" @click.stop="upd">[update]</span>
</div>
<ul v-if="isFolder" v-show="open">
<item class="item" v-for="(item, index) in model.children" :key="index + item.name" :index="index" :model="item" @del="model.children.splice($event, 1)"></item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</script>
<ul id="demo">
<item class="item" v-for="(model, index) in treeData" :key="index + model.name" :index="index" :model="model" @del="treeData.splice($event, 1)"></item>
</ul>
<script>
var data = [
{name: "han"},
{name: "wang"},
{
name: "liu",
children: [
{name: "zhang"},
{name: "lu"}
]
}
];
Vue.component("item", {
template: "-sharpitem-template",
props: {
model: Object,
index: Number
},
data: function () {
return {
open: false,
up: true
}
},
computed: {
isFolder: function () {
return this.model.children && this.model.children.length;
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open;
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, "children", []);
this.addChild();
this.open = true;
}
},
addChild: function () {
this.model.children.push({
name: "new child"
});
},
upd: function () {
this.up = !this.up;
}
}
});
var demo = new Vue({
el: "-sharpdemo",
data: {
treeData: data
}
});
</script>
</body>
</html>