我有一个标签组件:
<template>
<div class="tabs">
<div class="tabs__list">
<div
class="tabs__tab"
:class="{'tabs__tab_active': i === active}"
@click="changeTab(i)"
v-for="(label, i) in Tabs.labels"
:key="i"
>{{label}}</div>
</div>
<div class="tabs__container" ref="container">
<div class="tabs__wrapper" ref="wrapper">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
computed: {
active() {
return this.Tabs.active
}
},
data() {
return {
Tabs: {
labels: [],
items: [],
active: 0
}
}
},
methods: {
setHeight() {
const el = this.Tabs.items[this.active]
const height = el.scrollHeight
this.$refs.container.style.height = height + 'px'
},
scrollWrapper() {
const {wrapper} = this.$refs
const offset = 100 * this.active
wrapper.style.transform = `translate3d(-${offset}%, 0, 0)`
},
changeTab(i) {
this.Tabs.active = i
this.setHeight()
this.scrollWrapper()
}
},
provide() {
return {
Tabs: this.Tabs
}
},
mounted() {
this.setHeight()
this.scrollWrapper()
this.debounce = _.debounce(this.setHeight, 50)
window.addEventListener('resize', this.debounce)
},
beforeDestroy() {
window.removeEventListener('resize', this.debounce)
}
}
</script>
它有一个子组件选项卡,我正在调用 API 来获取产品。每个产品都有变体,每个变体都有名称。这就是我的显示方式:
<div class="tabs-content">
<Tabs v-for="variation in product.attributes.variations">
<Tab :label="variation.name" :active="false">
</Tab>
</Tabs>
</div>
但这里的问题是所有 Tab 组件都有一个“tabs__tab_active”类。但默认情况下,我只想要第一个孩子。那么你有什么想法吗?