Tab自动轮播切换内容(nuxt)
html:
<section class="Topic" >
<div class="content">
<div class="box">
<div class="classification">
<ul class="tabNav">
<li v-for="(nav, index) in newTabNav" :key="index" :class="['tabNav-item',{ active: index === activeIndex}]" @mouseover="TabMouseEnter(index)" @mouseout="TabMouseLeave(activeIndex)">
<div class="tabNav-item-name">
<!-- <nuxt-link :to="nav.to ||''" target="_blank"> -->
<span>{
{nav.name}}</span>
<span class="img"><img v-if="nav.isNew" src="/new-index/1.png" alt=""></span>
<!-- </nuxt-link> -->
</div>
</li>
</ul>
<!-- 侧导航内容 -->
<div class="tabs-content" v-if="language == 'zh_CN'">
<div v-for="(tab, index) in newTabsCn" :key="index" :class="['tabs-item', { active: index == activeIndex }]">
<div class="bg" v-for="(group, index) in tab.groups" :key="index">
<nuxt-link v-if="group.to" :to="group.to ||''" target="_blank">
<img :src="group.image" alt="">
</nuxt-link>
<img v-else :src="group.image" alt="">
<div class="card-text" v-for="(item, index) in group.data" :key="index">
<div class="text1">{
{item.title}}</div>
<div class="text2">{
{item.content}}</div>
</div>
</div>
</div>
</div>
<!--以下因为要求做了语言区分,可根据实际情况来 -->
<div class="tabs-content" v-if="language == 'zh_TW'">
<div v-for="(tab, index) in newTabsTw" :key="index" :class="['tabs-item', { active: index == activeIndex }]">
<div class="bg" v-for="(group, index) in tab.groups" :key="index">
<nuxt-link v-if="group.to" :to=