监听el-drawer 中某个div到顶部的距离

在Element UI的`el-drawer`组件中，如果你想要监听某个`div`相对于抽屉顶部的距离，可以使用JavaScript的事件监听和DOM操作来实现。这里是一个基本示例：

首先，在你的Vue组件里，假设这个`div`绑定了一个变量`scrollDiv`：

<template>
  <el-drawer ref="drawer" :visible.sync="drawerVisible">
    <!-- 抽屉内容 -->
    <div ref="topContent" v-if="showScrollDiv"> <!-- 这是你要监听的div -->
      <p>这是滚动的div</p>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      showScrollDiv: true,
      scrollDistance: null, // 用于存储距离值
    };
  },
  mounted() {
    this.$refs.drawer.on('open-end', () => { // 当抽屉打开结束时开始监听
      const topContentRef = this.$refs.topContent;
      if (topContentRef) {
        window.addEventListener('scroll', this.updateScrollDistance);
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateScrollDistance); // 移除滚动事件监听
  },
  methods: {
    updateScrollDistance() {
      if (!this.$refs.topContent) return; // 如果div不存在，跳过
      const top = this.$refs.topContent.getBoundingClientRect().top;
      this.scrollDistance = top - document.documentElement.scrollTop || document.body.scrollTop; // 获取距离
    },
  },
};
</script>

在这个例子中，当`el-drawer`打开结束时（`open-end`事件），我们添加了一个滚动事件监听器。`updateScrollDistance`方法会在每次滚动时被调用，计算并更新`scrollDistance`变量。