Блог

попытка сделать слайдер с помощью Vue.js

Иметь такую структуру

 <slider>
    <slide> 1 </slide>
    <slide> 2 </slide>
    <slide> 3 </slide>
</slider>
  

В родительском компоненте я перехватываю слайды через $ slots.
В родительском компоненте (slider) получаю слайды через $slots.

Со стандартной анимацией перевода проблем нет. Но если я хочу добавить анимацию затухания к слайдам, я должен:

 .slider {
position: relative;
}

.slide {
position: absolute;
top: 0;
left: 0;
}
  

Итак, я должен установить высоту родительского элемента, равную самому высокому слайду.

Пытаюсь сделать это в смонтированном хуке:

 mounted() {

this.slides.forEach((item) => {
  console.log(item.elm.clientHeight);
})

}
  

Но это говорит как:

высота слайда1: 1559 высота слайда2: 1915 высота слайда3: 2371

Но реальная высота равна:

высота слайда1: 431 высота слайда2: 315 высота слайда3: 347

Установленный крюк не гарантирует, что дочерние компоненты будут смонтированы. Я должен установить высоту в

 mounted() {

this.$nextTick(() => {
  // code
})

}
  

MDN — хороший ресурс.

Попробуйте это.

 this.slides.forEach((item) => {
  console.log(item.elm.offsetHeight);
})