element plus组件Carousel组件3个卡片平铺样式改造

1.设置二级卡片的缩放量为1

2.动态计算每个卡片的偏移量，

<script setup>
import { ref,useTemplateRef } from 'vue'

const carouselRef = useTemplateRef("carouselRef");

const activeIndex = ref(0);
// 监听轮播图切换事件
const handleCarouselChange = (index) => {
    activeIndex.value = index;
};

const processIndex = (index, activeIndex, length)=> {
    const lastItemIndex = length - 1;
    const prevItemIndex = activeIndex - 1;
    const nextItemIndex = activeIndex + 1;
    const halfItemIndex = length / 2;

    if (activeIndex === 0 && index === lastItemIndex) {
        return -1;
    } else if (activeIndex === lastItemIndex && index === 0) {
        return length;
    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
        return length + 1;
    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
        return -2;
    }
    return index;
}

const computeTranslate = (idx) => {
    const index = processIndex(idx, activeIndex.value, lhcardList.value.length);

    const inStage = Math.round(Math.abs(index - activeIndex.value)) <= 1;
    const parentWidth = 1725;  //容器宽度

    if (inStage) {
        return (parentWidth * ((2 - 1) * (index - activeIndex.value) + 1)) / 3;
    } else if (index < activeIndex.value) {
        return (-(1 + 1) * parentWidth) / 3;
    } else {
        return ((3 + 1) * parentWidth) / 3;
    }
};

// 动态计算卡片的偏移量
const getItemStyle = (index) => {
    const offset = computeTranslate(index);

    return {
        transform: `translateX(${offset}px) scale(1)`,
        transition: "transform 0.3s ease-in-out",
    };
};


</script>
<template>
    <el-carousel
                ref="carouselRef"
                :autoplay="false"
                height="313px"
                trigger="click"
                type="card"
                class="custom-carousel"
                @change="handleCarouselChange"
            >
                <el-carousel-item
                    v-for="(item, key) in cardList"
                    :key="item.id"
                    :style="getItemStyle(key)"
                >
                    <div class="el-carousel-box carousel-card">
                        <!--卡片内容-->
                    </div>
                </el-carousel-item>
            </el-carousel>
</template>
<style lang="scss" scoped>

</style>