关于element-ui中轮播图手动切换轮播图片

---

前言

在开发过程中发现项目中轮播图点击指示器切换时无法动态切换图片

---

一、关于element-ui中轮播图手动切换轮播图片

问题：在开发过程中遇到手动切换轮播图图片没有效果，（由于将原生的指示器隐藏，自己写的指示器样式）切换事件无效果。

二、解决方案

1.查看element-ui中Carousel 走马灯组件的方法

其中setActiveItem为手动切换的方法。

2.解决方法

       <el-carousel
       	  width="100%"
          height="294px"
          :initial-index="oIndex"
          indicator-position="none"
          @change="handleChange"
		  ref="carousel"> //注册引用名
            <el-carousel-item v-for="item in list" :key="item.articleId" class="carou-item">
                <img :src="base+item.articleImgUrl" class="fill"  @click="navToPath(item.articleId)">
            </el-carousel-item>
        </el-carousel>
        <div class="indicator">//自定义的一个指示器
      		<div class="desc">文章名</div>//关于新闻展示的轮播
        	<div class="ind-list"> //指示器数字样式
               <span
                  v-for="(item,index) in list"
                  :key="index"
                  :class="index==oIndex?'active':''"
                  @click="clickChange(index)"
              >{{index+1}}</span>
            </div>
        </div>

js代码

	//数字指示器点击事件
    clickChange(index) {
      //参数index为图片索引
      this.oIndex = index;
	  this.$refs.carousel.setActiveItem(index) //调动setActiveItem方法，动态切换图片
      this.articleTitle = this.list[index]["articleTitle"];
    },

结尾

前端新手，仅作为学习笔记与经验积累，如有问题希望批评指出。