<template>
  <!--该组件用于底部悬浮按钮,将底部按钮写在该组件内,解决了ios和安卓因键盘加载方式不同,导致安卓按钮被顶起到键盘上方 是的底部按钮固定在底部 -->
  <div class="rt-footer-area" v-if="showBtn">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'RtFooterArea',
  data() {
    return {
      clientHeight: document.documentElement.clientHeight,
      showBtn: true // 控制按钮盒子显示隐藏
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$parent.footerRef = this.$refs.rtFooter;
    });
    window.onresize = () => {
      if (this.clientHeight > document.documentElement.clientHeight) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
    };
  },
  destroyed() {
    this.$parent.footerRef = null;
  }
};
</script>
<style lang="less" scoped>
.rt-footer-area {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
