## IOS 安全区域补丁
该补丁是为了解决在`IphoneX`之后有`安全区域`的设备中，页面`不满一屏`存在的BUG，BUG说明请看文末，想了解更多细节，请看[MR 206](https://git.winbaoxian.com/wy-front/bxs-ui-vue/merge_requests/206)。<br />
如果业务页面可能存在不满一屏的情况，请调用`SafeAreaPatch.create`方法，该方法仅会在iphoneX之后的机型生效，如果业务页面存在动态内容，如评论等，请在动态内容方法中调用`SafeAreaPatch.update`方法，组件库内`Popup` `BottomSheets` `Area` `DatetimePicker` `Picker` `ProfessionList`中都内置了`SafeAreaPatch.update`方法。

### Import
```js
import { SafeAreaPatch } from 'bxs-ui-vue'
```
或
```js
import Vue from 'vue'
import { SafeAreaPatch } from 'bxs-ui-vue'
// install方法会执行Vue.prototype.$safeAreaPatch = SafeAreaPatch
Vue.use(SafeAreaPatch)
// 使用如下
this.$safeAreaPatch.create()
```

### Example
```html
<bxs-cell-group>
  <bxs-cell title="动态添加内容" is-link @click="addCell()"/>
  <bxs-cell v-for="(title, index) in cellList" :title="title" :key="index" />
</bxs-cell-group>
```
```js
export default {
  data () {
    return {
      cellList: []
    }
  },
  mounted () {
    SafeAreaPatch.create()
  },
  beforeDestroy () {
    SafeAreaPatch.remove()
  },
  methods: {
    addCell() {
      this.cellList.push('动态增加的内容')
      SafeAreaPatch.update()
    }
  }
}
```

### Methods
| 方法名称 | 说明 | 参数 | 回调参数 |
| --- | --- | --- | --- |
| addXSupport | 自动探测`viewport-fit`，并添加`viewport-fit=cover` | - | - |
| isAfterIphoneX | 判断是否是iphoneX之后的机型 | - | `true` `false` |
| create | 添加安全区域补丁，在页面加载完成（包括异步资源）后调用 | - | - |
| update | 更新安全区域补丁，在页面Body高度变化时调用 | `Object` | - |
| remove | 移除安全区域补丁，在组件卸载时调用 | - | - |

### 问题说明
因IOS原生问题，在`IphoneX`之后有`安全区域`的设备中，我们的APP内，如果页面`不满一屏`，会存在如下图情况： <br />
<img src="https://media.winbaoxian.com/autoUpload/common/001_e68f099c0bbb17e.jpeg" width="200"/>
<img src="https://media.winbaoxian.com/autoUpload/common/005_3da457b65be2620.jpeg" width="200"/><br />
经排查发现在不满一屏情况下，`WKContentView`与`WKScrollView`不同，并且存在`34（安全区域的高度）`的差距，如下图情况：<br />
<img src="https://media.winbaoxian.com/autoUpload/common/002_c5998fe03367412.jpeg" width="200"/>
<img src="https://media.winbaoxian.com/autoUpload/common/003_ba4174f391ebd1f.jpeg" width="200"/>
<img src="https://media.winbaoxian.com/autoUpload/common/004_de619653ca03368.jpeg" width="200"/><br />
因此增加该补丁，核心逻辑就是强制`WKContentView`与`WKScrollView`相等，也就是强制`BodyHeight`与`WindowHeight`相等，所以在`Body`下增加了补全剩余高度的DOM
