Vue 슬롯의 높이 및 너비 계산

Vue 슬롯의 높이 및 너비 계산

슬롯의 높이와 너비를 계산하는 데 어려움을 겪고 있다.내 주변 구성 요소에서 이미지를 렌더링하려고 한다.이 이미지들의 크기는 105x160이다.그러나 console.log에 clientWidth 및 클라이언트가 있는 경우키, 난 0x24야

나는 내 문제가 이것과 관련이 있다고 믿는다.vue.js 2에서는 슬롯이 렌더링되면 구성 요소의 높이를 측정하지만, 나는 여전히 이해할 수 없다.경계 구성 요소와 개별 슬롯 구성 요소 모두에 $nextTick을 사용해 보았다.

내 주변 구성요소에는 다음이 있다.

<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 없이 distributSlots() 메서드를 작성했다.

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;
  });
},

나는 다음과 같이 Periple 구성 요소에 전달한다.

<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>

더욱이 각 기능에서 console.log(slot.elm)를 설정하고 브라우저 콘솔에서 어레이를 열면 올바른 클라이언트가 표시됨높이 + 클라이언트 너비:

보통 그런 경우에는 틀에 문제가 있다기보다는 논리적인 착오가 있다.그래서 나는 당신의 이슈를 보여주는 최소한의 코드로 당신의 코드를 단순화하는 것으로 갈 것이다.

받는다고 가정하면clientWidth그리고clientHeight에 관하여mounted()아니면, 악마가 아래에서 시작되었듯이, 그것은 그냥 효과가 있을 것이다.

타이머 해킹은 피하십시오. 타이머 해킹은 디버깅하기 매우 어려운 버그에 대한 원인일 수 있다.

<template>
  <div style="min-height: 100px; min-width: 100px;">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'MyContainer',
  data (){
    return {
      width: 0,
      height: 0,
    }
  },
  mounted (){
    this.width = this.$slots["default"][0].elm.clientWidth
    this.height = this.$slots["default"][0].elm.clientHeight
    console.log(this.width, this.height)  // => 100 100 (or more)
  },

}
</script>

<style scoped lang="scss">
</style>

트릭을 써서 코드를 넣을 수 있다.setTimeout짧은 지연으로 다른 스레드에서 실행하는 방법:

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

참조URL: https://stackoverflow.com/questions/47420251/calculating-height-and-width-of-vue-slots