关于修改elementPlus走马灯效果的神奇bug

我想改变elementPlus的走马灯card模式的轮播效果，在elementui时没什么问题，最近升级到vue3+elementPlus后就出现了奇怪的bug：只有后3个轮播项实现了我想要的效果

代码如下:

<template>
  <div style="width: 90%;margin-left: 6%;height: auto;">
    <el-carousel :autoplay="false" arrow="never" height="800px" indicator-position="none" type="card"
      @change="handleCarouselChange">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.src" style="width: 150px;height: 150px;border-radius: 50%;margin-top: 50px;">
        <h3>{{ item.userName }}</h3>
        <h3 style="line-height: 0;">{{ item.userRole }}</h3>
        <p style="margin-top: 50px;">{{ item.text }}</p>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup () {
    const carouselItems = ref([
      {
        id: 1,
        src: require('@/assets/img/BI.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text1'
      },
      {
        id: 2,
        src: require('@/assets/img/MB.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text2'
      },
      {
        id: 3,
        src: require('@/assets/img/ochirly.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text3'
      },
      {
        id: 4,
        src: require('@/assets/img/PB.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text4'
      },
      {
        id: 5,
        src: require('@/assets/img/BENBUNDER.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text5'
      },
      {
        id: 6,
        src: require('@/assets/img/GXG.png'),
        userName: 'ysd',
        userRole: 'IT',
        text: 'text6'
      }
    ])

    const handleCarouselChange = (index) => {
      const items = document.querySelectorAll('.el-carousel__item')
      items.forEach(item => {
        item.style.boxShadow = 'none'
      })
      setTimeout(() => {
        const currentItem = document.querySelector(`.el-carousel__item:nth-child(${index + 1})`)
        if (currentItem) {
          currentItem.style.boxShadow = '12px 8px 10px #a4b3c086'
          currentItem.style.transform = 'scale(0.88) translate(78%, -7%)'
          currentItem.style.transition = 'transform 0.3s'
        }
      }, 100)
    }

    onMounted(() => {
      handleCarouselChange(0)
    })

    return {
      carouselItems,
      handleCarouselChange
    }
  }
}
</script>

<style scoped>
.el-carousel__item {
  margin: 0 2%;
  border-radius: 10px;
  width: 36%;
  border: 2px solid whitesmoke;
  text-align: center;
  background-color: #b3c9db3d;
}

::-webkit-scrollbar {
  display: none;
}
</style>

你的代码看起来是正确的，但是出现了一个小错误。在 Element Plus 的 Carousel 组件中，轮播项的索引是从 0 开始的，而不是从 1 开始。因此，你需要将 handleCarouselChange 方法的索引参数从 index 更改为 index - 1。

 setTimeout(() => {  
        const currentItem = document.querySelector(`.el-carousel__item[data-index="${index - 1}"]`) // 对index进行减一操作，使其与实际的索引值匹配。  
        items.forEach(item => { // 这里使用的items应该为上一步中的items变量，以保证其包含了所有的轮播项元素。  
          item.style.boxShadow = 'none' // 先将所有轮播项的阴影样式设为无，以消除之前轮播项的阴影样式。  
        }) // 先执行这一步的样式重置操作，以保证在设置当前轮播项的阴影样式时不会受到之前轮播项的阴影样式的影响。

【以下回答由 GPT 生成】

问题解答:

对于elementPlus走马灯的card模式的轮播效果进行修改，可以根据具体的要求和期望的效果来设计修改方案。以下是一种可能的解决方案。

首先确保你已经引入了elementPlus的库和样式文件。
在HTML页面中添加一个包含若干个card的容器元素，如下所示： ```html
{{ item.content }}

3. 在Vue组件的data中定义carouselItems数组，用于存储每一个card的数据：javascript data() { return { carouselItems: [ { id: 1, title: 'Card 1', content: 'This is content for Card 1' }, { id: 2, title: 'Card 2', content: 'This is content for Card 2' }, { id: 3, title: 'Card 3', content: 'This is content for Card 3' }, //... ] } } 4. 添加一些自定义的CSS样式来修改轮播效果：css / 设置轮播容器的高度和宽度 / #carousel-container { height: 300px; width: 500px; }

/ 修改轮播项目的间距 / .el-carousel__item { margin-right: 20px; } ``` 请注意，这只是一个修改的示例，你可以根据自己的需求进行更多的自定义样式修改。

初始化elementPlus的carousel组件，并设置一些需要的属性： javascript mounted() { const carousel = this.$refs.carousel; carousel.interval = 5000; // 自动播放间隔时间，单位为ms carousel.trigger = 'click'; // 切换触发方式，可选值为'click'或'hover' carousel.arrow = 'always'; // 左右箭头显示方式，可选值为'always'、'never'或'hover' } 到此，你已经完成了对elementPlus走马灯的card模式的轮播效果的修改，并可以根据需要来进一步调整和优化轮播效果。

希望这个解决方案可以帮助到你，如果你有任何疑问，请随时提出。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^