Vue + element 点击事件修改走马灯的播放索引

最新推荐文章于 2025-03-26 15:28:30 发布

阳光下的雨u

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量4k

点赞数

本文链接：https://blog.csdn.net/smile2333/article/details/106075553

版权

需求：点击下方图片添加边框并改变走马灯播放的图片使其内容一致
方法：
element官方提供了setActiveItem方法

  <el-carousel trigger="click" height="380px" indicator-position="none" arrow="always" :initial-index="0"    
    ref="remarkCarusel" @change="lisChange">
          <el-carousel-item v-for="(item, index) in carLis" :key="index">
            <el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
            <div class="carShow">
              <span>2020-04-08 18:08:16</span>
            </div>
          </el-carousel-item>
   </el-carousel>
       <ul>
          <li v-for="(item, index) in carLis" :key="index" @click="lisChange(index)" :class="{ lisColor: isActive == index }">
            <img :src="item.url" alt="" />
            <div class="showCot">
              <span>2020-04-08 18:08:16</span>
            </div>
          </li>
          <div class="clear"></div>
        </ul>
         lisChange (index) {
		     this.$refs.remarkCarusel.setActiveItem(index);
		     this.isActive = index;
		  }

在这里插入图片描述