计算Vue插槽的高度和宽度

Question

我在计算插槽的高度和宽度时遇到问题。我正在尝试在我的 Perimeter 组件中渲染图像。这些图像的大小为 105x160。但是，当我 console.log clientWidth 和 clientHeight 时，我得到 0x24。

我相信我的问题与此有关：在 vue.js 2 中，在渲染插槽后测量组件的高度，但我仍然无法弄清楚。我已经尝试在 Perimeter 组件和单个插槽组件上使用 $nextTick 。

在我的 Perimeter 组件中，我有：

<template>
  <div class="d-flex">
    <slot></slot>
    <div class="align-self-center">
      <slot name="center-piece"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Perimeter',
    mounted() {
      this.distributeSlots();
    },
    updated() {
      this.distributeSlots();
    },
    computed: {
      centerRadius() {
        return this.$slots['center-piece'][0].elm.clientWidth / 2;
      },
    },
    methods: {
      distributeSlots() {
        let angle = 0;
        const {
          clientHeight: componentHeight,
          clientWidth: componentWidth,
          offsetTop: componentOffsetTop,
          offsetLeft: componentOffsetLeft,
        } = this.$el;
        const componentXCenter = componentWidth / 2;
        const componentYCenter = componentHeight / 2;

        const slots = this.$slots.default.filter(slot => slot.tag) || [];
        const step = (2 * Math.PI) / slots.length;

        slots.forEach((slot) => {
          slot.context.$nextTick(() => {
            const { height, width } = slot.elm.getBoundingClientRect();
            console.log(`height ${height}, width ${width}`);
            const distanceFromCenterX = (this.centerRadius + componentXCenter) * Math.cos(angle);
            const distanceFromCenterY = (this.centerRadius + componentYCenter) * Math.sin(angle);
            const x = Math.round((componentXCenter + distanceFromCenterX + componentOffsetLeft) - (width / 2));
            const y = Math.round((componentYCenter + distanceFromCenterY + componentOffsetTop) - (height / 2));

            slot.elm.style.left = `${x}px`;
            slot.elm.style.top = `${y}px`;

            angle += step;
          });
        });
      },
    },
  };
</script>

我还编写了没有 $nextTick 的distributeSlots() 方法：

distributeSlots() {
  let angle = 0;
  const {
    clientHeight: componentHeight,
    clientWidth: componentWidth,
    offsetTop: componentOffsetTop,
    offsetLeft: componentOffsetLeft,
  } = this.$el;
  const componentXCenter = componentWidth / 2;
  const componentYCenter = componentHeight / 2;

  const slots = this.$slots.default.filter(slot => slot.tag) || [];
  const step = (2 * Math.PI) / slots.length;

  slots.forEach((slot) => {
    const { height, width } = slot.elm.getBoundingClientRect();
    const distanceFromCenterX = (this.centerRadius + componentXCenter) * Math.cos(angle);
    const distanceFromCenterY = (this.centerRadius + componentYCenter) * Math.sin(angle);
    const x = Math.round((componentXCenter + distanceFromCenterX + componentOffsetLeft) - (width / 2));
    const y = Math.round((componentYCenter + distanceFromCenterY + componentOffsetTop) - (height / 2));

    slot.elm.style.left = `${x}px`;
    slot.elm.style.top = `${y}px`;

    angle += step;
  });
},

我传递给 Perimeter 组件如下：

<template>
  <perimeter>
    <div v-for="(book, index) in books.slice(0, 6)" v-if="book.image" :key="book.asin" style="position: absolute">
      <router-link :to="{ name: 'books', params: { isbn: book.isbn }}">
        <img :src="book.image" />
      </router-link>
    </div>
  <perimeter>
</template>

更糟糕的是，当我在 forEach 函数中使用 console.log(slot.elm) 并在浏览器控制台中打开数组时，我看到了正确的 clientHeight + clientWidth：

Answer 1

您可以使用一个技巧，将代码放入一个setTimeout方法中，以便在另一个线程中以微小的延迟执行它：

setTimeout(() => {
     // Put your code here
     ...
}, 80)