elemen点击时，修改走马灯的播放索引

由于工作需求，使用了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方法。

本期封面：