<ul class="b-tabs">
<li v-for="tab in tabs"
:key="tab.id"
:class="['tab', { 'text-primary': currentTab === tab.id }]"
@click="changeTab(tab.id)">{{ tab.name }}</li>
</ul>
<b-card>
<div class="card-title text-md mb-3">1.选择营销目标</div>
<b-row>
<b-col v-for="(item,index) in target" :key="index">
<div class="select-card">
<div class="title">{{item.title}}</div>
<div class="desc">{{item.desc}}</div>
</div>
</b-col>
</b-row>
</b-card>
<template>
<div>
<ul class="b-tabs">
<li v-for="tab in tabs"
:key="tab.id"
:class="['tab', { 'text-primary': currentTab === tab.id }]"
@click="changeTab(tab.id)">{{ tab.name }}</li>
</ul>
<b-card>
<div class="card-title text-md mb-3">1.选择营销目标</div>
<b-row>
<b-col v-for="(item,index) in target" :key="index">
<div class="select-card" :id="item.id">
<div class="title">{{item.title}}</div>
<div class="desc">{{item.desc}}</div>
</div>
</b-col>
</b-row>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [], // 你的tabs数据
target: [], // 你的target数据
currentTab: '', // 当前选中的tab
// 其他数据...
};
},
methods: {
changeTab(id) {
// 找到对应的元素
const element = document.getElementById(id);
// 如果元素存在,就滚动到该元素
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
// 更新当前选中的tab
this.currentTab = id;
},
// 其他方法...
},
// 其他选项...
};
</script>
在这个示例中,我们在changeTab
方法中使用了document.getElementById
来获取对应的元素,然后使用scrollIntoView
方法来滚动到该元素。scrollIntoView
方法接受一个选项对象,其中behavior: 'smooth'
表示使用平滑滚动。请注意,这只是一个示例,实际的代码可能需要根据你的应用的需求进行调整。例如,你可能需要在滚动之前进行一些额外的检查,或者在滚动之后执行一些额外的操作