antd-vue走马灯点击图片然后改变当前图片样式 失效

可以尝试以下几个步骤解决：

1. 确保antd-vue版本是最新的，可以通过npm更新antd-vue。

2. 确认你的代码中是否正确使用了Carousel组件，例如：

<Carousel>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
</Carousel>

3. 确保你的代码中是否有类似以下的点击事件监听：

<Carousel @click="handleClick">
  ...
</Carousel>

methods: {
  handleClick(e) {
    console.log(e.target);
    e.target.style.backgroundColor = 'red';
  },
},

4. 确认你的代码中是否有对应的样式，例如：

.ant-carousel .slick-slide:hover {
  border: 1px solid red;
}

如果以上步骤都没有解决问题，可以尝试重新创建一个简单的示例来测试是否出现同样的问题。

相关问题

antd-vue走马灯点击图片设置样式，失效

你可以尝试在点击事件中手动设置样式，例如：

<template>
  <div>
    <a-carousel v-model="currentSlide">
      <a-carousel-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item.src" @click="handleClick(index)" :style="{cursor: 'pointer'}">
      </a-carousel-slide>
    </a-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      imgList: [
        { src: 'https://via.placeholder.com/150x150.png?text=Image+1' },
        { src: 'https://via.placeholder.com/150x150.png?text=Image+2' },
        { src: 'https://via.placeholder.com/150x150.png?text=Image+3' },
      ],
    };
  },
  methods: {
    handleClick(index) {
      const slides = document.querySelectorAll('.ant-carousel .slick-slide');
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.style.border = '2px solid red';
        } else {
          slide.style.border = 'none';
        }
      });
    },
  },
};
</script>

在该示例中，我们给每张图片绑定了一个点击事件 `handleClick`，在点击事件中获取所有轮播图的 `slick-slide` 类元素，并手动设置样式。在这里，我们给点击的图片添加了一个红色边框，其它图片则去除边框。你可以根据需要更改样式和实现逻辑。

antd-vue走马灯点击图片设置样式没有效果

可能是因为你没有正确设置样式，可以尝试以下方法：

1. 使用scoped属性，来确保样式只作用于当前组件：

<template>
    <carousel>
        <div v-for="(item, index) in list" :key="index">
            <img :src="item.imgUrl" @click="handleClick(index)" />
        </div>
    </carousel>
</template>

<style scoped>
    .ant-carousel .slick-dots li {
        /* 设置样式 */
    }
</style>

2. 使用/deep/或>>>来穿透样式：

<template>
    <carousel>
        <div v-for="(item, index) in list" :key="index">
            <img :src="item.imgUrl" @click="handleClick(index)" />
        </div>
    </carousel>
</template>

<style>
    .ant-carousel /deep/ .slick-dots li {
        /* 设置样式 */
    }
</style>

3. 通过在父级组件中设置样式的方式来影响子组件样式：

<template>
    <div class="carousel-wrapper">
        <carousel>
            <div v-for="(item, index) in list" :key="index">
                <img :src="item.imgUrl" @click="handleClick(index)" />
            </div>
        </carousel>
    </div>
</template>

<style>
    .carousel-wrapper .ant-carousel .slick-dots li {
        /* 设置样式 */
    }
</style>

希望这些方法能够帮助您解决问题。