更新时间：2023-02-09 GMT+08:00
编写app-preview组件的JavaScript逻辑
您可通过编写app-preview组件的重要js逻辑来设置原模板在预览界面的缩放比例、大小和位置，相关参数及用途如表1所示。
outerWidth
outerWidth参数用于控制模板在预览视图中的缩放尺寸，该参数应和包裹模板的div盒子在宽度上保持一致。假设盒子宽度为230px，则app-preview父组件的outerWidth字段值也应为230px。您可根据模板的实际展示需求自行决定outerWidth值，判断是否传入。
<div > // 将pages传入app-preview自定义组件，使用pages字段接收 <app-preview [pages]="pages" [outerWidth]="230"></app-preview> </div>
pages[0].style
在app-preview父组件中，用outerWidth除以pages[0].style.width得到一个缩放比例scale，然后将scale值赋给pages[0].style，以确保模板的整体显示比例正常。
let scale = outerWidth / parseInt(pages[0].style.width, 10);
pages[0].style.transform = `scale(${scale})`
pages[0].content
在app-preview父组件中，遍历content数组，为数组里每个item的style样式属性增加left、top、width、height属性，对应item.x、item.y、item.w、item.h，最后统一加上单位px，以控制每个子组件的大小和定位位置。
for (let item of pages[0].content) {
item.style = {
...item.style,
left: joinPX(item.x),
top: joinPX(item.y),
width: joinPX(item.w),
height: joinPX(item.h)
};
}
joinPX(data) {
return data + 'px';
}
目前在pages的数据对象中，除pages[0].style和pages[0].content外的参数暂未使用。
父主题： 父组件开发
