[PC组件]-容器组件创建-菜鸟教程

云小米

1、展示代码：

//其中：{{{item}.style.paddingleft}}是指样式左边界，{{{item}.style.paddingleft}}样式右边距//{item}.params.childs 是子容器的个数<div class="row margin0" style="padding-left:{{{item}.style.paddingleft}}px;padding-right:{{{item}.style.paddingleft}}px;padding-top:{{{item}.style.paddingtop}}px;">    <div class="col-sm-8 selected min-height40" ng-repeat="{item}x in {item}.params.childs" ng-if="$index==0" onmouseenter="$(this).children('.panel-edit').show();" onmouseleave="$(this).children('.panel-edit').hide();">        <div class="panel-edit edit-left"><a ng-click="pagedata.add({item}x.childs);" class="btn btn-default edit-a">添加组件</a><a ng-click="pagedata.edit_style({item}x);" class="btn btn-default edit-a">容器样式</a>    <a ng-click="{item}.params.childs.splice($index,1);" class="btn btn-danger edit-a">删除</a></div>        <div ng-include="pagedata.show_html({item}x.cloud_id,'{item}x')"></div>    </div>    <div class="col-sm-4 selected min-height40" ng-repeat="{item}x in {item}.params.childs" ng-if="$index==1" onmouseenter="$(this).children('.panel-edit').show();" onmouseleave="$(this).children('.panel-edit').hide();">        <div class="panel-edit edit-left"><a ng-click="pagedata.add({item}x.childs);" class="btn btn-default edit-a">添加组件</a><a ng-click="pagedata.edit_style({item}x);" class="btn btn-default edit-a">容器样式</a>    <a ng-click="{item}.params.childs.splice($index,1);" class="btn btn-danger edit-a">删除</a></div>        <div ng-include="pagedata.show_html({item}x.cloud_id,'{item}x')"></div>    </div></div>2、编辑代码：

//容器一般不需要单独编辑内容；<div ><div class="table-responsive">无</div></div>3、生成代码

//这里是真实PC页面生成后的代码,{style.paddingleft}表示替换成样式设置的左边距，其他的以此类推！{childs0} 是第一个容器的设计代码内容，以此类推{childs1}<div class="row margin0" style="padding-left:{style.paddingleft}px;padding-right:{style.paddingleft}px;padding-top:{style.paddingtop}px;">    <div class="col-sm-8">        {childs0}     </div>   <div class="col-sm-4">        {childs1}     </div></div>4、默认代码

//由于是容器，下面无论分多少个容器，每个子容器必须是一个子容器，cloud_id必须是基础容器4{"childs":[{"type":"1","title":"列1","cloud_id":"4","childs":[]},{"type":"1","title":"列2","cloud_id":"4","childs":[]}]}