Elemen when clicking, modify the playback index of the walking lantern

Due to the need of work , Used element Lantern component library , Later, I raised another demand , Used to modify the riding light index , I wish to record

demand ： You can click the title number on the right , Jump directly to a topic ？

Code ：

element The official provided setActiveItem Method , Calling this method can change the currently played slide . How to use it is as follows ：

Child components

<el-carousel
      indicator-position="none"  // This page is a sub component 
      height="70rem"
      :autoplay="false"
      arrow="never"
      ref="cardShow"// The focus is on communication ref
      @change="changeIndex"
      :loop="false"
    >
    </el-carousel>

  Parent component ：

<!--  Part I test questions  -->
        <div>
          <h3> The first part </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)" // Focus on this click event 
            >
              <div class="noun">{
   { item.serial_num }}</div>
              <!--  answer  -->
              <template>
                <div class="Selected">
                  <div>{
   { onAnswer[index] ? onAnswer[index].choice : "" }}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
​
        <!--  Part II test questions  -->
        <div class="selection">
          <h3> The second part </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)" // Focus on this click event 
            >
              <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: {
    //  The second part is the selected topic 
    myCurrentSelection(e) { // Call ref The method in setActiveItem
      this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e - 1);
    },
    //  The first part is the selected topic 
    CurrentSelection(e) { // Call ref The method in setActiveItem
      let a =
        this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e);
      console.log("s", a);
      console.log(" Current choice ", e);
    },
    }

The above code test questions and riding lights passed current relation , The point is ref and setActiveItem Method .

result ：

Click on the title on the right , You can switch to the corresponding topic .

On one page

<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)
}

The point is ref and setActiveItem Method .

The cover of this issue ：