[发明专利]一种自适应终端的可视化大屏动态容器组件

权利要求书

1.一种自适应终端的可视化大屏动态容器组件，其特征在于：包括输入组件和大屏容器组件；其中输入组件通过定义@Input输入属性动态的接受用户传入的各种数据和html模板内容；并由@Input输入属性提取页面的属性；大屏容器组件的html结构包括两层div，即作为父级div标签的container-box层和作为子级div标签的scale-box层；其中Scale-box层用于接收并承载输入组件接收的页面内容和属性，同时能获取到浏览器窗口的尺寸，且在scale-box层初始化ngOninit生命周期函数时调用封装好的用于控制缩放的函数setScale；setScale函数为：

ww =窗口分辨率宽度/原始分辨率宽度；

wh=窗口分辨率高度/原始分辨率高度；

比较ww和wh的大小，以较小的值作为scale-box层要等比缩放的比例值；从而能保证scale-box层内容能完整显示到container-box内；

Container-box层的作用主要是承载scale-box层，且container-box大小始终等于窗口的大小，当用户编写的html内容不能等比例显示在浏览器窗口时，container-box层和scale-box层之间会产生留白，用户通过选定自定义背景样式的css对象，然后该选定的css对象传入大屏容器组件的输入属性background，并由container-box接受background对象，然后作用在自身的css背景样式上，从而使留白能自定义背景，使留白与页面的交汇处匹配。

2.根据权利要求1所述的自适应终端的可视化大屏动态容器组件，其特征在于：页面元素的html、body及容器组件container-box层的css对象属性需要设置成width:100%，height:100%，在引用动态容器组件后，container-box就成为了页面元素body的直接子元素，因此container-box就能保证与窗口分辨率的大小始终保持一致，即container-box大小始终等于窗口的大小。

3.根据权利要求1所述的自适应终端的可视化大屏动态容器组件，其特征在于：在获取页面属性时，还能获取页面的边界信息，根据边界信息为用户自定义合适的留白背景样式。