vue获取Dom元素距离视口最底部的距离

你可以使用 `getBoundingClientRect()` 方法来获取一个 DOM 元素相对于视口的位置信息，然后计算该元素距离视口底部的距离。

以下是一个使用 Vue 的示例代码：

<template>
  <div ref="myElement">Hello World!</div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const { bottom } = this.$refs.myElement.getBoundingClientRect();
      const distanceToBottom = window.innerHeight - bottom;
      console.log('Distance to bottom:', distanceToBottom);
    },
  },
};
</script>

在上述代码中，我们首先使用 `ref` 属性给元素添加一个引用，然后在 `mounted` 钩子函数中添加了一个滚动事件监听器。每当发生滚动事件时，`handleScroll` 方法会被调用。在该方法中，我们使用 `getBoundingClientRect()` 方法获取到元素的位置信息，并计算出距离视口底部的距离。

请注意，在组件销毁前我们也需要移除掉滚动事件监听器，以防止内存泄漏。