Javascript не возвращает правильный элемент offsetHeight при загрузке страницы в проекте vuetify - PullRequest
Новая
       7

Javascript не возвращает правильный элемент offsetHeight при загрузке страницы в проекте vuetify

0 голосов
/ 04 марта 2020

Я построил скользящую галерею, которая сама изменяет размеры при загрузке страницы или при изменении размера экрана. Контейнерный элемент галереи имеет значение overflow: hidden, и у меня есть метод определения размера галереи (updateCards), который принимает offsetHeight элементов внутри него и применяет эту высоту к контейнеру. 

<v-container fluid v-resize="updateCards" ref="cardContainer" id="cardContainer" style="overflow:hidden;" class="pa-0">        
  <v-layout id="cardLayout" ref="cardLayout" row wrap>
    <div v-for="(item, index) in this.businessServices" class="card" :key="index" :id="'card' + index" :ref="'card' + index">
       <v-card class="px-4 py-5">                                         
           <h6 class="mb-5">{{item.type}}</h6>
           <p class="large mb-5">{{item.description}}</p>
           <h3 class="mb-4">{{item.cost}} / hour</h3>
           <v-btn flat class="ma-0 mb-4 px-0"><v-icon class="mr-2 photo">$vuetify.icons.photographer</v-icon><strong>See samples of their work</strong></v-btn>
           <v-btn style="width:100%;" class="light border ma-0">Request service</v-btn>
        </v-card>
      </div>
   </v-layout>
</v-container>

Это часть метода updateCards, которая устанавливает высоту элемента контейнера: 

  //set container height//
  //48 px for bottom padding and 40px transition on cards//
  let cardHeight = document.getElementById("card0").offsetHeight + 88;  
  this.$refs.cardContainer.style.height = cardHeight + "px";

Я поместил метод updateCards в каждый экземпляр жизненного цикла (создан, смонтирован, обновленный и т. д. c), но все же контейнерный элемент галереи никогда не изменяет размеры должным образом, если размер страницы не изменяется после полной загрузки.

Я заметил, что если я удалю отступы из элементов в контейнере, контейнер будет иметь правильный размер, но заполнение обязательно для дизайна и должно быть включено в offsetHeight, поэтому я не могу удалить его. Я предполагаю, что css загружается после всего остального на странице, поэтому метод запускает размер элементов, но затем заполнение загружается после смонтированного хука. Я попытался добавить встроенный отступ css внутри тега стиля на странице и с помощью класса vuetify (px-2), но ни один из них не устранил проблему.

Так что теперь я пытаюсь придумать, как я могу вызвать метод updateCards, когда высота элементов галереи была сгенерирована с применением заполнения . Как я могу запустить свой метод, когда элементы действительно загружены?

...