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

Question

我想改变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>

Answer 1

你的代码看起来是正确的，但是出现了一个小错误。在 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' // 先将所有轮播项的阴影样式设为无，以消除之前轮播项的阴影样式。  
        }) // 先执行这一步的样式重置操作，以保证在设置当前轮播项的阴影样式时不会受到之前轮播项的阴影样式的影响。