#vuejs2 #vue-component
#vuejs2 #vue-компонент
Вопрос:
попытка сделать слайдер с помощью 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
Ответ №1:
Установленный крюк не гарантирует, что дочерние компоненты будут смонтированы. Я должен установить высоту в
mounted() {
this.$nextTick(() => {
// code
})
}
Комментарии:
1. Рад, что вы нашли решение!
Ответ №2:
Попробуйте это.
this.slides.forEach((item) => {
console.log(item.elm.offsetHeight);
})
Комментарии:
1. Та же ошибка с высотой