使用Element的el-carousel轮播图组件添加点击事件

1,395 阅读1分钟

1、使用场景:

使用el-carousel轮播图组件时发现只有change事件,想要添加点击事件,发现点击没反应 @click="bannerLinkDetails(item)"不起作用

<el-carousel :interval="3000" arrow="arrow">
        <el-carousel-item
          v-for="(item,index) in bannerLists"
          :key="index"
          @click="bannerLinkDetails(item)">
          <img class="banner_left_image" :src="item.cover" alt srcset />
          <div class="abstract">
            <span class="abstract_text">{{ item.title }}</span>
          </div>
        </el-carousel-item>
      </el-carousel>

2、解决方法:

@click换成@click.native接收循环的轮播图的数据即可

<el-carousel :interval="3000" arrow="arrow">
        <el-carousel-item
          v-for="(item,index) in bannerLists"
          :key="index"
          @click.native="bannerLinkDetails(item)">
          <img class="banner_left_image" :src="item.cover" alt srcset />
          <div class="abstract">
            <span class="abstract_text">{{ item.title }}</span>
          </div>
        </el-carousel-item>
      </el-carousel>