<template>
<div>
<ul>
<li>
v-for="(item,index) in tabList" :key="index" class="li-item"
:class="currentIndex==index?'li-item is-active":'li-item'
@click=handleItemClick
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tabList: [
"商品基本信息",
"商品销售信息",
"图片和详细信息",
"商品组合",
"售后服务",
"包装清单",
"其他信息",
],
selected2: [], // 接收数据的对象
};
},
mounted() {},
methods: {
handleItemClick(el, index) {
this.currentIndex = index;
let items = this.$el.querySelectorAll(".content-item");
items.forEach((v, i) => {
v.scrollIntoView({
behavior: "smooth",
block: "satrt",
});
});
},
},
};
</script>
$el :是 用于获取组件内 DOM(包括子组件,当前.vue组件,以及父组件)