Есть компонент табов -
<template>
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return { tabs: [] };
},
created() {
this.tabs = this.$children;
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name == selectedTab.name;
});
}
}
};
</script>
Есть компонент таба -
<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
name: { required: true },
selected: { default: false }
},
data() {
return {
isActive: false
};
},
computed: {
href() {
return "#" + this.name.toLowerCase().replace(/ /g, "-");
}
},
mounted() {
this.isActive = this.selected;
}
};
</script>
И вызов в компоненте -
<tabs>
<tab name="Характеристики" :selected="true">
<div class="tabs-flex">
<div class="tabs-flex__item">
<img src="/fasadalum-tab1.webp" alt />
</div>
<div class="tabs-flex__item">
<h3>МАТЕРИАЛЫ И РАЗМЕРЫ ФАСАДНЫХ РЕЕК ИЗ АЛЮМИНИЯ</h3>
<p>
<strong>Фасадные алюминиевые рейки под дерево</strong> изготавливаются из алюминия с декоративными покрытиями под дерево, однотонный матовый цвет по RAL.
</p>
<p>Рейки изготавливаются замкнутой прямоугольной или квадратной формы.</p>
<p>Крепление реек к стенам, осуществляется на горизонтальную алюминиевую направляющую, с помощью уголка прикрепляемого с обратной стороны.</p>
<div>Стандартные размеры реек:</div>
<ul>
<li>сечение рейки 60х40мм</li>
<li>сечение рейки 80х40мм</li>
<li>сечение рейки 80х50мм</li>
<li>сечение рейки 100х40мм</li>
<li>сечение рейки 100х50мм</li>
<li>сечение рейки 120х50мм</li>
</ul>
<p>Максимальная длина рейки-ламели из алюминия составляет 6000мм</p>
<p>Возможно изготовление сечение рейки по вашему проекту</p>
</div>
</div>
</tab>
<tab name="Цветовые решения">
<div class="tabs-flex">
<div class="tabs-flex__item">
<img src="/fasadalum-tab1.webp" alt />
</div>
<div class="tabs-flex__item">
<h3>ЦВЕТА ПОКРЫТИЙ ФАСАДНЫХ РЕЕК ИЗ АЛЮМИНИЯ ПОД ДЕРЕВО</h3>
<p>
<strong>Фасадные алюминиевые рейки под дерево</strong> различаются по типу покрытия и покраски на следующие виды:
</p>
<ul>
<li>покрытия под дерево</li>
<li>покрытия однотонные металлик</li>
<li>покрытия однотонные</li>
</ul>
<p>Посмотреть наш каталог цветов, можно по ссылке ниже</p>
<nuxt-link no-prefetch to="/price">Посмотреть</nuxt-link>
</div>
</div>
</tab>
<tab name="Прайс лист">
<h1>Why we do it</h1>
</tab>
<tab name="Сроки изготовления">
<h1>Сроки изготовления</h1>
</tab>
</tabs>
До этого были табы, которые были просто не разделены на компоненты и контент выводился v-for из массива с контентом, ему был задан transition-group. Сейчас как бы я не задавал transition - у меня не работает. Может кто подсказать, как правильно задать transition?
