## BottomSheets组件
保险师全平台所有从底部弹窗的浮层弹窗均可适用（选择器的弹窗高度根据实际内容高度而定，此规范不包含
内容分享浮层）

### Import
```js
import { BottomSheets } from 'bxs-ui-vue';
```

### Example
```html
<!-- 普通用法 -->
<bxs-bottom-sheets v-model="isShow" title="自定义标题">
  <div>你的自定义内容</div>
</bxs-bottom-sheets>

<!-- 自定义底部栏 -->
<bxs-bottom-sheets v-model="isShow" title="自定义标题" @domReady="domReady">
  <div>你的自定义内容</div>
  <div slot="footer">
    <bxs-tab>
      <bxs-tab-item>这是个</bxs-tab-item>
      <bxs-tab-item>自定义</bxs-tab-item>
      <bxs-tab-item>底部栏</bxs-tab-item>
    </bxs-tab>
  </div>
</bxs-bottom-sheets>

<!-- 使用better-scroll -->
<bxs-bottom-sheets v-model="isShow"
  title="使用BScroll滚动"
  use-b-scroll
  prevent-scroll-through
  @bscroll="bscroll">
   <div>你的自定义内容</div>
</bxs-bottom-sheets>

<!-- 自定义顶部栏 + 动态内容 -->
<bxs-bottom-sheets v-model="isShow" use-b-scroll @bscroll="instanceScroll = $event">
  <div slot="header">
    <bxs-tab :index="tabComponentIdx" @change="function(newTabIdx) {tabComponentIdx = newTabIdx;$nextTick(()=>instanceScroll.refresh())}">
      <bxs-tab-item>自定义标题</bxs-tab-item>
      <bxs-tab-item>本 Tab 特长有 20 条</bxs-tab-item>
    </bxs-tab>
    <div @click="isShow = false">
      <bxs-icon name="close" />
    </div>
  </div>
  <div>
    <p>浮层内容根据 Tab 切换</p>
    <p v-if="tabComponentIdx === 0">
      这个 Tab 下内容很短很短
    </p>
    <div v-if="tabComponentIdx === 1">
      <p v-for="n in 20">
        {{ n }}. 这个 Tab 下有超长内容
      </p>
    </div>
  </div>
</bxs-bottom-sheets>

<!-- 暴露关键dom -->
<bxs-bottom-sheets v-model="isShow" title="自定义标题" @domReady="domReady">
  <div>你的自定义内容</div>
</bxs-bottom-sheets>

<!-- 暴露transition所有js钩子，浏览下方链接查看所有钩子 -->
<!-- https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90 -->
<bxs-bottom-sheets v-model="isShow" title="自定义标题"
  @appear="transitionHook('appear', $event)"
  @before-enter="transitionHook('before-enter', $event)"
  @enter="transitionHook('enter', $event)"
  @after-enter="transitionHook('after-enter', $event)"
  @leave="transitionHook('leave', $event)"
  @after-leave="transitionHook('after-leave', $event)">
  <div>你的自定义内容</div>
</bxs-bottom-sheets>

```
```js
import { BottomSheets, Tab, TabItem } from 'bxs-ui-vue';
export default {
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    close () {
      this.isShow = false;
    },
    bscroll (instance) {
      // 此处通过instance可以操作better-scroll参数，具体看better-scroll文档
    },
    domReady ($dom) {
      // 获取浮层dom
      const $layer = $dom.layer
      // 获取内容层dom
      const $content = $dom.content
      // 获取滚动层dom
      const $scroll = $dom.scroll
      // 获取头部栏dom
      const $header = $dom.header
      // 获取底部栏dom
      const $footer = $dom.footer
    },
    transitionHook (name, el) {
      // 此处el与vue transition文档一致
    }
  },
  components: {
    [BottomSheets.name]: BottomSheets,
    [Tab.name]: Tab,
    [TabItem.name]: TabItem
  }
}
```

### Attributes
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| v-model | 必选，是否显示浮层 | Boolean | false |
| title | 可选，顶部栏标题,hideHeader为false并且slot未被覆盖时有效 | String | '' |
| height | 可选，半屏浮层的固定高度 | Number | null |
| useBScroll | 可选，是否使用better-scroll，值为false时，使用默认滚动 | Boolean | false |
| hideHeader | 可选，是否隐藏浮层顶部栏 | Boolean | false |
| hideFooter | 可选，是否隐藏浮层底部栏 | Boolean | false |
| overlay | 可选，是否显示遮罩背景 | Boolean | true |
| close-on-click-overlay | 可选，点击遮罩是否关闭 | Boolean | true |
| lock-scroll | 可选，是否禁止document滚动，在弹出层无滚动或自己重写滚动情况下使用 | Boolean | false |
| prevent-scroll-through | 可选，是否防止滚动穿透，在弹出层使用默认滚动下使用 | Boolean | false |
| supportIphoneX | 可选，是否兼容iphoneX，解决在app内不满一屏情况下的bug | Boolean | false |

### Slot
| 参数 | 说明 |
| --- | --- |
| — | 默认slot |
| header | 顶部栏slot |
| footer | 底部栏slot |

### Event
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| bscroll | 可选，better-scroll初始化后回调事件 | scroll对象 |
| domReady | 可选，浮层弹起后，初始化内容后调用 | dom对象 |
| overlayClose | 可选，点击遮罩后的回调事件 | - |

### 浮层内容动态变更
* `header` 与 `footer` slot 的内容高度变更目前无法支持，会导致滚动区域计算问题。
* 默认 slot 的内容高度可以变更，使用 better scroll 的情况下，需要在 DOM 更新后调用 `scrollInstance.refresh()`。例子见“自定义顶部栏 + 动态内容”。
