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-carouselref="carouselRef":autoplay="false"height="313px"trigger="click"type="card"class="custom-carousel"@change="handleCarouselChange"><el-carousel-itemv-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>