由于工作需求,使用了element的走马灯组件库,后面又提了个需求,用到了修改走马灯索引,特此记录
需求:可以点击右边的题目题号,直接跳转到某一条题目?
代码:
element官方提供了setActiveItem
方法,调用此方法可以改变当前播放的幻灯片。使用方法如下:
子组件
<el-carousel
indicator-position="none" //此页面为子组件
height="70rem"
:autoplay="false"
arrow="never"
ref="cardShow"//重点在与ref
@change="changeIndex"
:loop="false"
>
</el-carousel>
父组件:
<!-- 第一部分試題 -->
<div>
<h3>第一部分</h3>
<div class="myAnswer">
<div
class="answer"
v-for="(item, index) in solution"
:key="item.serial_num"
:style="BackColor[index] ? BackColor[index].bgColor : ''"
@click="CurrentSelection(index)" //重点在这个点击事件
>
<div class="noun">{{ item.serial_num }}</div>
<!-- 答案 -->
<template>
<div class="Selected">
<div>{{ onAnswer[index] ? onAnswer[index].choice : "" }}</div>
</div>
</template>
</div>
</div>
</div>
<!-- 第二部分試題 -->
<div class="selection">
<h3>第二部分</h3>
<div class="myAnswer">
<div
class="answer"
v-for="(item, inx) in BackSelection"
:key="inx"
:style="Background[inx] ? Background[inx].bgColor : ''"
@click="myCurrentSelection(item.serial_num)" //重点在这个点击事件
>
<div class="noun">{{ item.serial_num }}</div>
<template>
<div class="Selected">
<div>{{ second[inx] ? second[inx].choice : "" }}</div>
</div>
</template>
</div>
</div>
</div>
js
methods: {
// 第二部分选择的题目
myCurrentSelection(e) { //调用子组件里的ref中的方法setActiveItem
this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e - 1);
},
// 第一部分选择的题目
CurrentSelection(e) { //调用子组件里的ref中的方法setActiveItem
let a =
this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e);
console.log("s", a);
console.log("当前选择", e);
},
}
上方代码试题和走马灯通过current关联,重点在于ref
和setActiveItem
方法。
结果:
点击右边的题目的时候,已经可以切换到对应的题目。
在一个页面的话
<div class="bottom-box-right">
<div class="campusDisplay">
<span v-for="(val, key, i) in campusBuildingData" :key="i" :class="{'campus-active':current===i}" @click="changeCampusIndex(i)">{{key}}</span>
</div>
<el-carousel trigger="click" :interval='5000' arrow="never" @change="changeCampus" ref="remarkCarusel">
<el-carousel-item v-for="(val, key, i) in campusBuildingData" :key="i">
<Bar3D :id="'bottom-box-right-bar3d'+i" width="350px" height="300px" :campusData="val"></Bar3D>
</el-carousel-item>
</el-carousel>
</div>
js
changeCampus (val) {
this.current = val
},
changeCampusIndex (index) {
this.$refs.remarkCarusel.setActiveItem(index)
}
重点还是在于ref
和setActiveItem
方法。
本期封面: