javascript - 如何从 Vue.js DOM 中获取刚刚删除的元素的高度

Question

• 我在 Vue.js 中有一个索引为 0 到 49 的项目列表
• 我显示了由 startIndex 和 endIndex 控制的这些项目的子集
• 当我将 startIndex 增加到 1 时，会显示 1-49 之间的项目，0 会从 DOM 中删除
• 如何获取刚刚删除的 0 高度
• 如果我编辑 endIndex，如何获取刚刚添加的项目的高度？

HTML

<script type="text/x-template" id="virtual-list">
  <div id="root" ref="root">
    <div id="viewport" ref="viewport">
      <div id="spacer" ref="spacer" :style="spacerStyle">
        <div v-for="i in visibleItems" :key="i.index" :id="i.index" class="list-item">
          {{i.value}}
  </div>
  </div>
  </div>
  </div>
</script>

<div id="app">
  <button @click="incrementStart">Start +</button>
  <button @click="decrementStart">Start -</button>
  <button @click="incrementEnd">End +</button>
  <button @click="decrementEnd">End -</button>
  <virtual-list></virtual-list>
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

#app {
  padding: 1.25rem;
}

#root {
  height: 50%;
  overflow-y: auto;
}

.list-item {
  padding: 0.75rem 0;
}

Vue.js

const PAGE_SIZE = 50;

const items = new Array(PAGE_SIZE).fill(null).map((item, index) => {
  return {
    id: faker.random.uuid(),
    index: index,
    value: "Item " + index + " " + faker.random.words(index % 25)
  };
});

const bus = new Vue({});

Vue.component("virtual-list", {
  template: "#virtual-list",
  data() {
    return {
      isMounted: false,
      items,
      startIndex: 0,
      endIndex: PAGE_SIZE,
      scrollTop: 0,
      translateY: 0,
      scrollDirection: 0
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex);
    },
    /**
    Translate the spacer verticaly to keep the scrollbar intact
    We only show N items at a time so the scrollbar would get affected if we dont translate
    */
    spacerStyle() {
      return {
        willChange: "auto",
        transform: "translateY(" + this.translateY + "px)"
      };
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$el.scrollTop;
      this.startIndex = Math.floor(this.scrollTop / 42);
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (newValue > oldValue) {
        this.scrollDirection = 1;
      } else if (newValue < oldValue) {
        this.scrollDirection = -1;
      }
    },
    startIndex(newValue, oldValue) {
      // console.log(this.$refs.spacer.children);
    }
  },
  beforeUpdate() {
    // console.log('before update', this.$refs.spacer.children);
  },
  mounted() {
    this.isMounted = true;
    const children = this.$refs.spacer.children;
    for (let i = 0; i < children.length; i++) {
      // console.log(children[i].offsetTop - this.$el.offsetTop);
      children[i].setAttribute("data-height", children[i].scrollHeight);
    }

    bus.$on("incrementStart", () => {
      this.startIndex++;
    });
    bus.$on("decrementStart", () => {
      this.startIndex--;
    });
    bus.$on("incrementEnd", () => {
      this.endIndex++;
    });
    bus.$on("decrementEnd", () => {
      this.endIndex--;
    });

    this.$el.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    this.$el.removeEventListener("scroll", this.handleScroll);
  }
});

new Vue({
  el: "#app",
  methods: {
    incrementStart() {
      bus.$emit("incrementStart");
    },
    decrementStart() {
      bus.$emit("decrementStart");
    },
    incrementEnd() {
      bus.$emit("incrementEnd");
    },
    decrementEnd() {
      bus.$emit("decrementEnd");
    }
  }
});

Answer 1

我认为最好计算那些子div的容器div的高度，

您可以使用以下方式获取元素的高度

element.getBoundingClientRect().height

要访问元素，您可以为该 div 分配一个引用，并像这样访问该 div

this.$refs.containerDiv.getBoundingClientRect().height

之后，您可以比较旧值和新值来了解它减少/增加了多少。