<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-20
|
描述：diy组件-组件类别
|
-->
|
<div v-if="typeList!=null">
|
<div class="common-form">组件库</div>
|
<div class="min-group">
|
<div v-for="(group,key) in typeList" :key="key">
|
<div class="hd">{{key | typename}}</div>
|
<div class="bd">
|
<div class="item" v-for="(item,index) in group.children" :key="index" @click="$parent.onAddItem(item.type)">
|
<p class="p-icon icon iconfont icon-tuichu"></p>
|
<p class="p-txt">{{item.name}}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
/*类别列表*/
|
typeList:null
|
};
|
},
|
props: {
|
defaultData: Object
|
},
|
created() {
|
this.init();
|
},
|
filters:{
|
|
/*组名转换成中文*/
|
typename:function(type){
|
let name='';
|
if(type=='media'){
|
name="媒体组件";
|
}else if(type=='shop'){
|
name="商城组件";
|
}else if(type=='tools'){
|
name="工具组件";
|
}
|
return name;
|
}
|
|
},
|
methods: {
|
|
/*初始化数据*/
|
init() {
|
let tempList={};
|
for(let key in this.defaultData){
|
let item=this.defaultData[key];
|
if(!tempList.hasOwnProperty(item.group)){
|
tempList[item.group]={};
|
tempList[item.group].children=[];
|
}
|
tempList[item.group].children.push(item);
|
}
|
this.typeList=tempList;
|
}
|
}
|
};
|
</script>
|
|
<style></style>
|
