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: Array,
			default: () => []
		}
	})
	const carouselRef = ref()
	const arrowPrev = () => {
		carouselRef.value.prev()
	}
	const arrowNext = () => {
		carouselRef.value.next()
	}
</script>

<style lang="scss" scoped>
	.carousel_box {
		position: relative;
		.arrow {
			width: 48px;
			height: 48px;
			border-radius: 24px;
			background: #fdfeff;
			border: 1px solid #e9f0ff;
			color: #647daf;
			position: absolute;
			top: 50%;
			margin-top: -24px;
			&:hover {
				background: #578fff;
				color: #fff;
				cursor: pointer;
			}
			&.left-a {
				left: -96px;
			}
			&.right-a {
				right: -96px;
			}
		}
	}
	.apply_box_zhan {
		width: 360px;
		height: 0;
	}
</style>

第二步：在components中新建ApplyCard.vue文件，代码如下

<template>
	<div>
		<div class="card c-p" @click="onUrl">
			<div class="main_img">
				<img class="w_100 h_100" :src="Config.base_url + data.app_icon" alt="" />
				<!-- <div class="tip">PC网页端</div> -->
			</div>

			<div class="content">
				<div class="title ellipsis_1 fs-20">{{ data.app_name }}</div>
				<div class="text mt-14 d-f jc-sb ai-c">
					<div class="fromtype d-f ai-c jc-c zw" v-if="data.url_type == 2">
						<img src="@/assets/images/home/zw-icon.png" alt="" />

						<span class="fs-12 ml-4">登陆类型1</span>
					</div>
					<div class="fromtype d-f ai-c jc-c hlw" v-if="data.url_type == 1">
						<img class="icon" src="@/assets/images/home/hlw-icon.png" alt="" />

						<span class="fs-12 ml-4">登陆类型2</span>
					</div>
					<div class="collection d-f jc-sb ai-c c-p" @click.stop="onCollection">
						<span class="star d-f ai-c jc-c mr-10" :class="{ select: data.fav_status == 1 }">
							<!-- select -->
							<el-icon :size="16"><StarFilled /></el-icon>
						</span>
						<span class="fs-18">{{ data.fav_status == 1 ? '取消收藏' : '收藏' }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import Config from '@/utils/config'
	import { StarFilled } from '@element-plus/icons-vue'
	import $http from '@/api/api'
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const onUrl = () => {
		window.open(props.data.app_url, '_blank') // 在新窗口打开外链接
	}
	const onCollection = () => {
		$http
			.post('/Admin/GateIndex/favOrNot', {
				app_id: props.data.app_id
			})
			.then((res) => {
				props.data.fav_status == 0 ? (props.data.fav_status = 1) : (props.data.fav_status = 0)
			})
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 360px;
		height: 294px;
		border-radius: 4px;
		border: 1px solid #d7e8f8;
		overflow: hidden;
		&:hover {
			border: 1px solid #71bbff;
		}
		.main_img {
			width: 100%;
			height: 204px;
			position: relative;
			img {
				object-fit: cover;
			}
			.tip {
				position: absolute;
				top: 8px;
				left: 8px;
				padding: 8px 12px;
				border-radius: 4px;
				border: 1px solid #d7e8f8;
				background-color: #132a4043;
				color: #fff;
				font-size: 14px;
			}
		}
		.content {
			padding: 16px 16px 0;
			.title {
				font-weight: 400;
			}
			.text {
				.fromtype {
					width: 94px;
					height: 26px;
					border-radius: 4px;
					.icon {
						width: 14px;
						height: 14px;
					}
					&.zw {
						color: #3175ff;
						background: #eef8ff;
					}
					&.hlw {
						color: #ff8a24;
						background: #fff1de;
					}
				}
				.collection {
					color: #7a7a7a;
					.star {
						// padding: 5px;
						width: 24px;
						height: 24px;
						border-radius: 12px;
						background: #e6f4ff;
						color: #b0c9ff;
						box-shadow: 0px 2px 4px 0px rgba(156, 172, 197, 0.2);
						&.select {
							background: #fdd4d4;
							color: #ff5967;
						}
					}
				}
			}
		}
	}
</style>

第三步：使用该组件，代码如下

<!-- 导入该组件 -->
<Carousel v-if="departmentsList.length" :data="departmentsList" />

// 导入组件
import Carousel from './components/Carousel.vue'

== 运行效果图如下 ==