vue3项目开发中，我们需要实现Element-plus el-carousel走马灯给自定义图片绑定点击事件，点击后可以轮播走马灯图片。

使用到的element-plus版本

"element-plus": "^2.3.8",

为了实现点击左右图标进行轮播图切换，你可以在<img>标签上添加@click事件监听器，然后调用element-plus的prev和next方法。以下是如何实现这个效果的示例：

<template>
  <div class="cardBodyMain">
    <img class="icon_left" src="./assets/icon_left.png" alt="" @click="prevSlide">
    <div class="cardBody" ref="cardBodyRef">
      <el-carousel ref="carousel" class="cardBodyInner" :autoplay="false" indicator-position="none" :interval="4000" type="card"
                   :height="cardBodyHeight + 'px'">
        <el-carousel-item v-for="item in list" :key="item">
          <div class="cardInfo" :style="{ backgroundImage: 'url(' + item.img + ')' }">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <img class="icon_right" src="./assets/icon_right.png" alt="" @click="nextSlide">
  </div>
</template>

<script>
import img1 from './assets/img1.png'
import img2 from './assets/img2.png'
import img3 from './assets/img3.png'

export default {
  name: "title",
  data() {
    return {
      list: [{
        img: img1,
      }, {
        img: img2,
      }, {
        img: img3,
      }, {
        img: img1,
      }, {
        img: img2,
      }, {
        img: img3,
      },],
      cardBodyHeight: 0 // Default height
    }
  },
  components: {},
  mounted() {
    this.cardBodyHeight = this.$refs.cardBodyRef.clientHeight - 10;
  },
  methods: {
    prevSlide() {
      this.$refs.carousel.prev();
    },
    nextSlide() {
      this.$refs.carousel.next();
    }
  },
}
</script>

在上述代码中，我们在左右图标上添加了@click事件监听器，并在对应的方法中调用了element-plus的prev和next方法来切换轮播图。