When elemen is clicked, modify the playback index of the carousel

Due to work requirements, element's revolving lantern component library was used, and a requirement was raised later, which used to modify the revolving lantern index, which is hereby recorded

Requirements: You can click on the question number on the right to jump directly to a certain question?

code:

element officially provides setActiveItema method, calling this method can change the currently playing slideshow. The method of use is as follows:

Subassembly

<el-carousel
      indicator-position="none"  //此页面为子组件
      height="70rem"
      :autoplay="false"
      arrow="never"
      ref="cardShow"//重点在与ref
      @change="changeIndex"
      :loop="false"
    >
    </el-carousel>

parent component:

<!-- 第一部分試題 -->
        <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>

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

The above code test questions are related to the revolving lantern through current, and the focus is on refthe setActiveItemmethod.

result:

When you click on the topic on the right, you can already switch to the corresponding topic.

words on a 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>

changeCampus (val) {
 this.current = val
},
changeCampusIndex (index) {
  this.$refs.remarkCarusel.setActiveItem(index)
}

The focus is still refon setActiveItemthe method.

Cover of this issue:

When elemen is clicked, modify the playback index of the carousel

Guess you like