element-plus + vue3实现卡片无缝滚动效果

第一步：在components文件夹下新建Carousel.vue的文件，代码如下

<template>
	<div class="w_100 h_100 carousel_box">
		<template v-if="data.length > 1">
			<div class="arrow left-a d-f ai-c jc-c" @click="arrowPrev">
				<el-icon :size="24"><ArrowLeft /></el-icon>
			</div>
			<div class="arrow right-a d-f ai-c jc-c" @click="arrowNext">
				<el-icon :size="24"><ArrowRight /></el-icon>
			</div>
		</template>

		<el-carousel ref="carouselRef" indicator-position="none" :autoplay="false" arrow="never">
			<el-carousel-item v-for="(item, index) in data" :key="index">
				<div class="apply_box d-f jc-sb fxw-w pb-10">
					<template v-for="card in item" :key="card">
						<!-- 卡片组件 -->
						<ApplyCard :data="card" />
					</template>
					<div class="apply_box_zhan"></div>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script setup>
	import {
   
    reactive, ref } from 'vue'
	import {
   
    ArrowRight, ArrowLeft } from '@element-plus/icons-vue'

	import ApplyCard from './ApplyCard.vue'
	const props = defineProps({
   
   
		data: {
   
   
			type: Arr