二次封装el-carousel

我们创建了一个名为MyCarousel的组件，它接受el-carousel的一些常用属性作为props，并默认提供了一些值。我们还通过setup函数返回了所有props，以便它们可以在模板中被使用。

1.MyCarousel.vue组件

<!-- 轮播图片 -->
<template>
	<div class="carousel" :class="[{ twoBox: isTwo }, { elseBox: !isTwo }]">
		<el-carousel
			loop
			indicator-position="outside"
			class="carouselBox"
			:arrow="carouselListData.length === 1 ? 'never' : 'hover'"
			@change="changeItem"
			ref="carouse"
		>
			<el-carousel-item
				:width="props.width + 'px'"
				v-for="(item, index) in carouselListData"
				:key="index"
				@click="goHomepage(item)"
			>
				<img
					:src="item.imageUrl"
					:style="{
						width: props.widthImage + '%',
						height: props.heightImage + '%',
						cursor: item.posterLink || props.activeTab ? 'pointer' : ''
					}"
					alt="轮播图图片"
				/>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<!-- 轮播图 -->
<script setup lang="ts" name="CustomCarousel">
	import { QueryPosterInfoListOutput } from '@/api/home/types';
	import _ from 'lodash';

	const isTwo = ref(false); // 判断是不是两条数据
	const carouse = ref();
	const emit = defineEmits({ clickGoPage: null, changeItem: null });
	const props = defineProps({
		// 轮播图宽度
		width: {
			type: Number,
			default: 0
		},
		// 轮播图高度
		height: {
			type: String,
			default: '400'
		},
		type: {
			type: String,
			default: 'card'
		},
		// 相邻两张图片切换的间隔时间
		interval: {
			type: Number,
			default: 4000
		},
		//图片宽
		widthImage: {
			type: Number,
			default: 100
		},
		//图片高
		heightImage: {
			type: Number,
			default: 100
		},
		// 轮播图路径数组
		carouselList: {
			type: Array<QueryPosterInfoListOutput>,
			default: () => []
		},
        // 点击不同的tab切换对应的轮播图
		activeTab: {
			type: Number,
			default: 0
		}
	});
	const activeIndex = ref(0);
	const carouselListData = ref<QueryPosterInfoListOutput[]>([]);

	watch(
		() => props.carouselList,
		(newVal) => {
			fu(newVal);
		}
	);
	// 针对阶梯套餐的特殊处理
	watch(
		() => props.activeTab,
		(newVal) => {
			// console.log(activeIndex.value, 'newVal======', newVal);
			// 因为是element-ui组件的一个bug两张图片的需要单独特殊处理，目的是避免切换tab的时候，轮播图切换到上一张，轮播方向错误
			if (isTwo.value) {
				// 上一个的tab值
				const prev = carouselListData.value[activeIndex.value];
				// 如果上一个的值和当前点击的的一样,不做改变
				if (prev.id === newVal) {
					return;
				} else {
					let index = _.findIndex(carouselListData.value, (item, i) => {
						return item.id === newVal && i > activeIndex.value;
					});
					// 如果是最后一张图的时候需要回来到第一张图片
					if (index === -1) {
						index = 0;
					}
					// 重新设置选中的默认值
					carouse.value.setActiveItem(index);
				}
			} else {
				const index = _.findIndex(carouselListData.value, (item) => {
					return item.id === newVal;
				});
				carouse.value.setActiveItem(index);
			}
		}
	);

	// 点击进入链接，发起方法调用
	const goHomepage = (value: QueryPosterInfoListOutput) => {
		emit('clickGoPage', value);
		if (value.posterLink) {
			window.open(value.posterLink, '_blank');
		}
	};
    
	const changeItem = (val: any) => {
		const value = carouselListData.value[val];
		activeIndex.value = val;
		// console.log('index-----------', val);
		emit('changeItem', value);
	};

	onMounted(() => {
		fu(props.carouselList);
	});

	/**
	 * 重新处理，el-carousel-item数量为2时，组件循环方向一左一右的问题
	 *
	 * 思路：如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)
	 * @param data
	 */
	const fu = (data: QueryPosterInfoListOutput[]) => {
		if (data) {
			if (data.length === 2) {
				isTwo.value = true;
				//将2条数据复制一份为4条数据
				carouselListData.value = data.concat(data);
			} else {
				isTwo.value = false;
				//其他时候正常赋值
				carouselListData.value = data;
			}
		}
	};
</script>

<style scoped lang="scss">
	.twoBox {
		width: 100%;
		height: 100%;

		.carouselBox {
			width: 100%;

			//将复制出来的数据的下标隐藏
			:deep(.el-carousel__indicators) {
				& > li:nth-child(3),
				& > li:nth-child(4) {
					display: none;
				}
			}
		}
	}

	.elseBox {
		width: 100%;
		height: 100%;

		.carouselBox {
			width: 100%;
		}
	}
	.carousel {
		:deep {
			.el-carousel__indicators--outside .is-active button {
				background-color: var(--el-color-primary);
				width: 20px;
				height: 3px;
			}
			.el-carousel__indicators--outside button {
				// background-color: #e1e1e1;
				width: 9px;
			}
			.el-carousel__arrow {
				background-color: #8b8b8b;
			}
			.el-carousel__arrow--left {
				left: 16.1%;
				opacity: 40%;
			}
			.el-carousel__arrow--right {
				right: 16.1%;
				opacity: 40%;
			}
			.el-carousel__arrow--right:active,
			.el-carousel__arrow--left:active {
				opacity: 80%;
			}
			.el-carousel__container {
				margin-bottom: 7px;
				position: relative;
				width: 100%;
				height: auto;
				// aspect-ratio: 1440/600
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>

2.使用：

基础用法：

<template>
    <my-carousel
        v-if="bannerImgsList.length"
	    :height="'582'"
	    :carouselList="bannerImgsList"
	     @clickGoPage="clickGoPage"
	/>
</template>

<script setup lang="ts">
import { QueryPosterInfoListOutput } from '@/api/home/types';
const bannerImgsList = ref<QueryPosterInfoListOutput[]>([]);

const clickGoPage = (value: IcarouselList) => {
		console.log('=====', value);
		// router.push("/home");
};
</script>

 需要结合tab来动态联动的用法：

<template>
	<div class="step-package margin-top40" v-if="ladderPackageList && ladderPackageList.length">
		<!-- 切换的tab -->
		<div class="flex-center margin-top20">
			<div
				v-for="item in ladderPackageList"
				:key="item.id"
				class="step-package-tabs"
				:class="{ 'step-package-tabs-active': activeTab == item.id }"
			>
				<el-button class="img-button" @click="clickSelectTab(item)">
					{{ item.posterName }}
				</el-button>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="margin-top30 step-carousel">
			<my-carousel
				:height="'422'"
				:width="1000"
				:carouselList="ladderPackageList"
				@changeItem="changeItem"
				@clickGoPage="clickGoPage"
				:activeTab="activeTab"
			/>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import { useRouter } from 'vue-router';
	import { queryFrontLadderPackageFront } from '@/api/ladderPackage';
	import { QueryLadderPackageOutput } from '@/api/ladderPackage/types';
	const router = useRouter();

	const ladderPackageList = ref();
	const activeTab = ref<number>(0);

	onMounted(() => {
		getData ();
	});
	const getData = async () => {
		const result = await 接口;
		if (result && result.length) {
			ladderPackageList.value = result;
			activeTab.value = result[0].id;
		}
	};

	const clickSelectTab = (item: QueryLadderPackageOutput) => {
		activeTab.value = item.id;
	};

	const clickGoPage = (val: any) => {
		console.log('val', val);
	};
	const changeItem = (val: any) => {
		activeTab.value = val.id;
	};
</script>

<style lang="scss" scoped>
	.step-package {
		height: 100%;
		width: 100%;
		.step-package-content {
			width: 70%;
			margin: 0 auto;
		}
		.step-carousel {
			:deep {
				.el-carousel__container {
					aspect-ratio: 1440/420;
				}
			}
		}
		.step-package-tabs {
			margin: 0 3em;
			cursor: pointer;
			border-radius: 16px;
			.img-button {
				border: 0;
				border-radius: 16px;
			}
		}
		.step-package-tabs-active {
			margin: 0 3em;
			background-color: var(--el-color-primary);
			color: #fff;
			.img-button {
				background-color: var(--el-color-primary);
				border-color: var(--el-color-primary);
				color: #fff;
			}
		}
	}
</style>

3.效果图：

最后，同个点击上面的tab切换到不同的图片上，同理，切换不同的轮播图，上面的tab也会跟着动，双向的联动。