GraceUI 页面布局组件

在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。在之前 graceUI 发布了 graceHeader、graceIphonexBottom、system.js 等组件及模块来组合解决这些兼容性问题。graceUI 发布了 gracePage 组件，来更高效的完成这项工作；

gracePage 组件介绍
gracePage 组件是页面级的，它将页面划分为头部、主体、底部三个可灵活配置的部分，可以实现自动多平台、多设备的兼容布局。
同时也解决了 IOS 键盘覆盖页面的问题，是一个非常推荐大家使用的组件；

gracePage 组件属性

customHeader : { type : Boolean, default : true } // 是否开启自定义导航
headerHeight : { type : Number,  default : 44 } // 头部导航高度，单位 px
headerIndex  : { type : Number,  default : 999 } // 头部导航 层级
headerBG     : { type : String,  default : 'none' } // 头部导航背景颜色
statusBarBG  : { type : String,  default : 'none' } // 沉浸式导航颜色
footerIndex  : { type : Number,  default : 999 } // 底部导航层级
rbWidth      : { type : Number, default : 100} // 悬浮挂件宽度
rbBottom     : { type : Number, default : 100 } // 悬浮挂件bottom 值
rbRight      : { type : Number, default : 20 } // 悬浮挂件 right 值
footerBg     : { type : String,  default : ''} // 底部导航的背景颜色
isSwitchPage :  { type : Boolean, default : false } // 页面是否为一个 入口页内包含的切换页面( 不需要进行 iphoneX 底部适配 )

gracePage 组件插槽

<slot name="gHeader"></slot> 头部导航内容
<slot name="gBody"></slot> 页面主体内容
<slot name="gFooter"></slot> 页面底部导航内容
<slot name="gRTArea"></slot> 页面悬浮挂件内容

uni-app 开发时 APP 端必须的设置（manifast.json）

/* 5+App特有相关 */
"app-plus": {
    "nvueCompiler":"uni-app",
    "safearea": {
        "background": "#FFFFFF",  
        "bottom": {  
            "offset": "auto"  
        }  
    },
}

说明
可以通过插槽、组件属性的灵活使用适配各种设备及场景；