1.效果图
image.png
image.png
2.布局
<div class="box-body">
<div class="form-group">
<label for="homePageName">说明</label>
<input type="itemNote" id="homePageName" style="width:1000px;" placeholder="输入说明">
</div>
<div>
<label for="templatesId">模板ID</label>
<input type="text" id="templatesId" style="width:1000px" v-bind:value="id">
</div>
<!--TODO-->
<div id="form">
<ul>
<block-item v-model="item" item-key="数据" />
</ul>
<button class="btn btn-primary" @click="showValue">logJson</button>
<button class="btn btn-primary" v-on:click="saveValue">保存</button>
</div>
</div>
模板：
<!-- 模板 -->
<script type="text/x-template" id="block-item-template">
<li>
{{itemKey}}
<button v-if="itemType === 'array'" @click="add">add</button>
<button v-if="showRemove" @click="remove">remove</button>
<input v-if="itemType === 'string'" :value="value" @input="$emit('input', $event.target.value)" />
<ul v-else>
<block-item v-for="(_, key) in value" :key="key" v-model="value[key]" :itemKey="key" :showRemove="itemType === 'array' && value.length > 1"
@remove="onRemove" />
</ul>
</li>
</script>
实例以及函数方法:
/*todo*/
Vue.component('block-item', {
template: '#block-item-template',
props: ['value', 'itemKey', 'showRemove'],
data: function () {
return {}
},
computed: {
itemType: function () {
return this.typeOf(this.value)
}
},
methods: {
typeOf(item) {
if (Array.isArray(item)) {
return 'array'
} else if (item && typeof item === 'object') {
return 'object'
} else {
return 'string'
}
},
add() {
if (this.itemType !== 'array') {
return
}
this.value.push(this.value.length === 0 ? '' : this.clone(this.value[0]))
},
clone(item) {
const type = this.typeOf(item)
if (type === 'object') {
const obj = {}
for (let key in item) {
obj[key] = this.clone(item[key])
}
return obj
} else if (type === 'array') {
return item.length === 0 ? [] : [this.clone(item[0])]
} else {
return ''
}
},
remove() {
this.$emit('remove', this.itemKey)
},
onRemove(key) {
if (this.itemType === 'array') {
this.value.splice(key, 1)
} else if (this.itemType === 'object') {
this.$delete(this.value, key)
}
}
}
})
new Vue({
el: '#form',
data: {
item: {}
},
methods: {
showValue() {
console.log(JSON.parse(JSON.stringify(this.item)))
},
saveValue(){
var obj = new Object();
obj.data=this.item;
obj.name=$('#homePageName').val();
obj.templatesId = $('#templatesId').val();
console.log(obj);
post("save",obj)
}
},
created: function() {
$.ajax({
type: "GET",
url: "getJson",
contentType: "application/json",
dataType: "json",
success: (message) => {
this.item = message.data
},
error: function (message) {
}
});
}
})
function test (){
var data = {};
data.storeItemId = "123";
data.storeId = "123";
var url = "save";
post(url,data);
}
function post(url,json){
$.ajax({
type: "POST",
url: url,
contentType: "application/json",
data: JSON.stringify(json),
dataType: "json",
success: function (message) {
console.log(message);
console.log(message.id);
alert("保存成功!");
window.location.href = "../edit/"+message.id+"/";
},
error: function (message) {
alert("org.sabuy.entity.homepages->not exit!");
console.log(message);
}
});
}
