vue弹窗，滚动实时自动判断显示上下位置

可以通过以下步骤实现vue弹窗滚动实时自动判断显示上下位置：

1. 在弹窗组件中，监听窗口滚动事件，使用`window.addEventListener('scroll', handler)`来监听。

2. 在滚动事件的处理函数中，获取弹窗的位置信息和窗口的滚动距离，计算出弹窗的显示位置。

3. 根据弹窗的显示位置，动态设置弹窗的样式，使其始终保持在窗口可见区域内。

下面是一个简单的示例代码：

<template>
  <div class="popup" :style="{ top: top + 'px' }">
    <!-- 弹窗内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 0, // 弹窗距离顶部的位置
      scrollY: 0 // 窗口滚动距离
    };
  },

  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },

  methods: {
    handleScroll() {
      const popup = this.$el;
      const popupHeight = popup.offsetHeight;
      const windowHeight = window.innerHeight;
      const popupTop = popup.getBoundingClientRect().top + window.pageYOffset;
      const scrollTop = window.pageYOffset;

      // 判断弹窗是否超出窗口顶部或底部
      if (popupTop < scrollTop) {
        // 弹窗在窗口上方，向下显示
        this.top = scrollTop;
      } else if (popupTop + popupHeight > scrollTop + windowHeight) {
        // 弹窗在窗口下方，向上显示
        this.top = scrollTop + windowHeight - popupHeight;
      } else {
        // 弹窗在窗口内，位置不变
        this.top = popupTop;
      }

      this.scrollY = scrollTop;
    }
  }
};
</script>

在这个例子中，我们使用`getBoundingClientRect()`方法获取弹窗的位置信息，使用`window.pageYOffset`获取窗口的滚动距离，然后根据这些信息计算出弹窗应该显示的位置，并将其设置为`top`样式的值。最后，使用`window.addEventListener()`和`window.removeEventListener()`方法来监听和取消监听窗口滚动事件。