底部操作菜单的吸底组件

因为样式问题

底部菜单需要一直在视图内

但界面的最下有一部分间隔空间

于是使用吸底部的这个方式

实现思想：找当前吸底的组件包含的dom 元素，是否在当前视图内，

如果没在当前视图范围内，则需要设置position = 'fixed'，bottom=0

来实现布局，和吸顶是一样的思想

<template>
  <div ref="stickyArea" :style="{ height: height + 'px', zIndex: zIndex }">
    <div :class="className"
      :style="{ bottom: isSticky ? stickyBottom + 'px' : '', zIndex: zIndex, position: position, width: width, height: height + 'px',}">
      <slot>
        <div>sticky</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StickyBottom',
  props: { 
    stickyBottom: {
      type: Number,
      default: 0
    },
    zIndex: {
      type: Number,
      default: 999
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      active: false,
      position: '',
      width: undefined,
      height: undefined,
      isSticky: false
    };
  },
 
  mounted() {
    console.log(' stickyBottom   ---- mounted');
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleResize);
    setTimeout(() => {
      this.height = this.$el.getBoundingClientRect().height;
    
    }, 300);
    this.handleScroll();
  },
  activated() {
    this.handleScroll();
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    sticky() {
      if (this.active) {
        return;
      }
      this.position = 'fixed';
      this.active = true;
      this.width = this.width + 22 + 'px';
      this.isSticky = true;
    },
    handleReset() {
      if (!this.active) {
        return;
      }
      this.reset();
    },
    reset() {
      this.position = '';
      const width = this.$el.getBoundingClientRect().width;
      this.width = width || 'auto';
      this.active = false;
      this.isSticky = false;
      this.handleScroll;
    },
    handleScroll() {
      const width = this.$el.getBoundingClientRect().width;
      this.width = width || 'auto';

      var rect = this.$el.getBoundingClientRect();
      //判断该当前btn 是否在可是区域内    在的话  不吸底部
      let inVisualRange =
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <=
          (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <=
          (window.innerWidth || document.documentElement.clientWidth);

      console.log(' inVisualRange   ---- handleScroll', inVisualRange);
      if (!inVisualRange) {
        this.sticky();
        return;
      }
      this.handleReset();
    },
    handleResize() {
      if (this.isSticky) {
        this.width = this.$el.getBoundingClientRect().width + 'px';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.stickyArea {
  overflow: hidden;
}
</style>

 实现样式：