vue2 根据 DOM 进入视口最底部时 让DOM元素显示

你可以使用 Intersection Observer API 来监听元素是否进入了视口最底部，并根据其状态来控制元素的显示。具体实现步骤如下：

1. 在 Vue 组件的 mounted 钩子函数中初始化 Intersection Observer 对象。

mounted() {
  // 初始化 Intersection Observer 对象
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  };
  this.observer = new IntersectionObserver(this.handleIntersect, options);
}

2. 编写 handleIntersect 方法来处理元素进入视口最底部的事件。当元素进入视口最底部时，该方法会将元素的显示状态设置为 true。

handleIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      this.isShow = true;
    }
  });
}

3. 将需要控制显示的元素添加到 Intersection Observer 对象中，开始监听元素状态。

mounted() {
  // 初始化 Intersection Observer 对象
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  };
  this.observer = new IntersectionObserver(this.handleIntersect, options);

  // 添加需要监听的元素
  this.$nextTick(() => {
    const target = this.$refs.target;
    this.observer.observe(target);
  });
}

4. 在模板中根据 isShow 属性控制元素的显示。

<template>
  <div>
    <div ref="target" v-show="isShow">需要显示的元素</div>
    <div>其他内容</div>
  </div>
</template>

这样，当元素进入视口最底部时，它就会显示出来。