Skip to content

Commit ca1379b

Browse files
jinkin1995jinkin1995
committed
refactor: 代码调整
1 parent 602169b commit ca1379b

File tree

8 files changed

+506
-529
lines changed

8 files changed

+506
-529
lines changed

‎dist/vue-json-edit.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/ArrayView.vue‎

Lines changed: 124 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,144 @@
11
<template>
2-
<div class="block_content array">
3-
<ol class="array-ol">
4-
<li v-for="(member, index) in flowData" :key="index" :class="['array-item', {'hide-item': hideMyItem[index] == true}]">
5-
<p v-if="member.type !== 'object' && member.type !== 'array'">
6-
<input type="text" v-model="parsedData[index].remark" class="val-input" v-if="member.type == 'string'" placeholder="string">
7-
<input type="number" v-model.number="parsedData[index].remark" class="val-input" v-if="member.type == 'number'" placeholder="number">
8-
<select name="value" v-model="parsedData[index].remark" class="val-input" v-if="member.type == 'boolean'">
9-
<option :value="true">true</option>
10-
<option :value="false">false</option>
11-
</select>
12-
</p>
13-
<div v-else>
14-
<span :class="['json-key', 'json-desc']">{{parsedData[index].type.toUpperCase()}}
15-
<i class="collapse-down" v-if="member.type == 'object' || member.type == 'array'" @click="closeBlock(index, $event)">
16-
<i class="icon-down-open"></i>
17-
</i>
18-
<i v-if="member.type == 'object'">{{'{' + parsedData[index].childParams.length + '}'}}</i>
19-
<i v-if="member.type == 'array'">{{'[' + parsedData[index].childParams.length + ']'}}</i>
20-
</span>
2+
<div class="block_content array">
3+
<ol class="array-ol">
4+
<li
5+
v-for="(member, index) in flowData"
6+
:key="index"
7+
:class="['array-item', {'hide-item': hideMyItem[index] == true}]"
8+
>
9+
<p v-if="member.type !== 'object' && member.type !== 'array'">
10+
<input
11+
type="text"
12+
v-model="parsedData[index].remark"
13+
class="val-input"
14+
v-if="member.type == 'string'"
15+
placeholder="string"
16+
>
17+
<input
18+
type="number"
19+
v-model.number="parsedData[index].remark"
20+
class="val-input"
21+
v-if="member.type == 'number'"
22+
placeholder="number"
23+
>
24+
<select
25+
name="value"
26+
v-model="parsedData[index].remark"
27+
class="val-input"
28+
v-if="member.type == 'boolean'"
29+
>
30+
<option :value="true">true</option>
31+
<option :value="false">false</option>
32+
</select>
33+
</p>
34+
<div v-else>
35+
<span :class="['json-key', 'json-desc']">
36+
{{parsedData[index].type.toUpperCase()}}
37+
<i
38+
class="collapse-down"
39+
v-if="member.type == 'object' || member.type == 'array'"
40+
@click="closeBlock(index, $event)"
41+
>
42+
<i class="icon-down-open"></i>
43+
</i>
44+
<i v-if="member.type == 'object'">
45+
{{'{' + parsedData[index].childParams.length + '}'}}
46+
</i>
47+
<i v-if="member.type == 'array'">
48+
{{'[' + parsedData[index].childParams.length + ']'}}
49+
</i>
50+
</span>
51+
52+
<span class="json-val">
53+
<template v-if="member.type == 'array'">
54+
<array-view
55+
:parsedData="parsedData[index].childParams"
56+
v-model="parsedData[index].childParams"
57+
></array-view>
58+
</template>
2159

22-
<span class="json-val">
23-
<template v-if="member.type == 'array'">
24-
<array-view :parsedData="parsedData[index].childParams" v-model="parsedData[index].childParams"></array-view>
25-
</template>
60+
<template v-if="member.type == 'object'">
61+
<json-view
62+
:parsedData="parsedData[index].childParams"
63+
v-model="parsedData[index].childParams"
64+
></json-view>
65+
</template>
66+
</span>
67+
</div>
2668

27-
<template v-if="member.type == 'object'">
28-
<json-view :parsedData="parsedData[index].childParams" v-model="parsedData[index].childParams"></json-view>
29-
</template>
30-
31-
</span>
32-
</div>
33-
34-
<i class="del-btn" @click="delItem(parsedData, member, index)">
35-
<i class="icon-trash"></i>
36-
</i>
37-
</li>
38-
</ol>
69+
<i class="del-btn" @click="delItem(parsedData, member, index)">
70+
<i class="icon-trash"></i>
71+
</i>
72+
</li>
73+
</ol>
3974

40-
<item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem" :needName="false"></item-add-form>
75+
<item-add-form
76+
v-if="toAddItem"
77+
@confirm="newItem"
78+
@cancel="cancelNewItem"
79+
:needName="false">
80+
</item-add-form>
4181

42-
<div class="block add-key" v-if="!toAddItem" @click="addItem">
43-
<i class="icon-plus"></i>
44-
</div>
82+
<div class="block add-key" v-if="!toAddItem" @click="addItem">
83+
<i class="icon-plus"></i>
4584
</div>
85+
</div>
4686
</template>
4787

4888
<script>
49-
import ItemAddForm from './ItemAddForm.vue'
89+
import ItemAddForm from "./ItemAddForm.vue";
5090
5191
export default {
52-
name: 'ArrayView',
53-
props: ['parsedData'],
54-
data: function() {
55-
return {
56-
'flowData': this.parsedData,
57-
'toAddItem': false,
58-
'hideMyItem': {}
59-
}
92+
name: "ArrayView",
93+
props: ["parsedData"],
94+
data: function() {
95+
return {
96+
flowData: this.parsedData,
97+
toAddItem: false,
98+
hideMyItem: {}
99+
};
100+
},
101+
components: {
102+
"item-add-form": ItemAddForm
103+
},
104+
methods: {
105+
delItem: function(parentDom, item, index) {
106+
this.flowData = this.flowData.rmIndex(index);
107+
if (this.hideMyItem[index]) this.hideMyItem[index] = false;
108+
this.$emit("input", this.flowData);
60109
},
61-
components: {
62-
'item-add-form': ItemAddForm
110+
111+
addItem: function() {
112+
this.toAddItem = true;
63113
},
64-
methods: {
65-
'delItem': function (parentDom, item, index) {
66-
this.flowData = this.flowData.rmIndex(index)
67-
if(this.hideMyItem[index]) this.hideMyItem[index] = false
68-
this.$emit('input', this.flowData)
69-
},
70114
71-
'addItem': function () {
72-
this.toAddItem = true
73-
},
115+
cancelNewItem: function() {
116+
this.toAddItem = false;
117+
},
74118
75-
'cancelNewItem': function () {
76-
this.toAddItem = false
77-
},
119+
closeBlock: function(index, e) {
120+
this.$set(this.hideMyItem, index, this.hideMyItem[index] ? false : true);
121+
},
78122
79-
'closeBlock': function (index, e) {
80-
this.$set(this.hideMyItem, index, this.hideMyItem[index]?false:true)
81-
},
123+
newItem: function(obj) {
124+
this.toAddItem = false;
82125
83-
'newItem': function (obj) {
84-
this.toAddItem = false
85-
86-
let oj = {
87-
'name': obj.key,
88-
'type': obj.type
89-
}
90-
if(obj.type == 'array' || obj.type == 'object') {
91-
oj.childParams = obj.val
92-
oj.remark = null
93-
} else {
94-
oj.childParams = null
95-
oj.remark = obj.val
96-
}
126+
let oj = {
127+
name: obj.key,
128+
type: obj.type
129+
};
130+
if (obj.type == "array" || obj.type == "object") {
131+
oj.childParams = obj.val;
132+
oj.remark = null;
133+
} else {
134+
oj.childParams = null;
135+
oj.remark = obj.val;
136+
}
97137
98-
this.flowData.push(oj)
99-
this.$emit('input', this.flowData)
100-
this.cancelNewItem()
101-
}
138+
this.flowData.push(oj);
139+
this.$emit("input", this.flowData);
140+
this.cancelNewItem();
102141
}
103-
}
104-
142+
}
143+
};
105144
</script>

0 commit comments

Comments
 (0)