Debido a los requisitos de trabajo, se utilizó la biblioteca de componentes de la linterna giratoria de element, y luego se planteó un requisito, que utilizó para modificar el índice de la linterna giratoria, que se registra aquí.
Requisitos: puede hacer clic en el número de pregunta a la derecha para ir directamente a una pregunta determinada.
código:
element proporciona oficialmente setActiveItem
un método, llamar a este método puede cambiar la presentación de diapositivas que se está reproduciendo actualmente. El método de uso es el siguiente:
Subensamblaje
<el-carousel
indicator-position="none" //此页面为子组件
height="70rem"
:autoplay="false"
arrow="never"
ref="cardShow"//重点在与ref
@change="changeIndex"
:loop="false"
>
</el-carousel>
componente padre:
<!-- 第一部分試題 -->
<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);
},
}
Las preguntas de la prueba de código anterior están relacionadas con la linterna giratoria a través de la corriente, y el enfoque está en ref
el setActiveItem
método.
resultado:
Cuando hace clic en el tema de la derecha, ya puede cambiar al tema correspondiente.
palabras en una pagina
<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)
}
El foco sigue estando ref
en setActiveItem
el método.
Portada de este número: