即实现下方图中,点击左侧对应按钮,右侧滑动到对应的组件位置
具体实现代码如下
<div id="big_div">
<div class="left_div">
<div class="text_div">
<div class="first_text">设备在线分析</div>
<div :class="is_index == 0 ? 'two_text sel_div' : 'two_text '" @click="handleSel(0, 'rsuOnline')">
<div class="img"><img v-if="is_index == 0" src="@/assets/images/三角形 3@2x.png" alt=""></div>
<div>RSU在线分析</div>
</div>
<div :class="is_index == 1 ? 'two_text sel_div' : 'two_text '" @click="handleSel(1, 'obuOnline')">
<div class="img"><img v-if="is_index == 1" src="@/assets/images/三角形 3@2x.png" alt=""></div>
<div>OBU在线分析</div>
</div>
</div>
<div class="text_div">
<div class="first_text">设备故障分析</div>
<div :class="is_index == 2 ? 'two_text sel_div' : 'two_text '" @click="handleSel(2, 'rsuMalfunction')">
<div class="img"><img v-if="is_index == 2" src="@/assets/images/三角形 3@2x.png" alt=""></div>
<div>RSU故障分析</div>
</div>
<div :class="is_index == 3 ? 'two_text sel_div' : 'two_text '" @click="handleSel(3, 'obuMalfunction')">
<div class="img"><img v-if="is_index == 3" src="@/assets/images/三角形 3@2x.png" alt=""></div>
<div>OBU故障分析</div>
</div>
</div>
</div>
<div class="right_div">
<!-- rsuOnline 组件 -->
<div id="rsuOnline">
<rsuOnline />
</div>
<!-- obuOnline 组件 -->
<div id="obuOnline">
<obuOnline />
</div>
<!-- rsuMalfunction 组件 -->
<div id="rsuMalfunction">
<rsuMalfunction />
</div>
<!-- obuMalfunction 组件 -->
<div id="obuMalfunction">
<obuMalfunction />
</div>
</div>
</div>
//跳转方法
handleSel(i, componentName) {
this.is_index = i
document.getElementById(componentName).scrollIntoView({ behavior: "smooth", block: 'start' });
},