Vue3中使用swiper、vue-swiper-awesome实现弹出层图片轮播组件

示例

核心组件 SwiperModal.vue

<template>
	<div v-if="visible" class="swiper-modal">
		<div class="modal-overlay" @click="close"></div>
			<div class="modal-content">
				<button class="close-btn" @click="close">×</button>
				<swiper
					:modules="modules"
					:navigation="true"
					:pagination="{ clickable: true }"
					class="swiper-container"
				>
					<swiper-slide v-for="(item, index) in images" :key="index">
						<img :alt="'Slide ' + index" :src="item" class="slide-image">
					</swiper-slide>
				</swiper>
			</div>
	</div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { getDicitemList } from '@/api/dictionary'
import { isResponseSuccess } from '@/utils/bean'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
	visible: Boolean,
	items: Array // [{ image: 'url1' }, { image: 'url2' }]
})

const emit = defineEmits(['close'])

const modules = [Pagination, Navigation]

const close = () => {
	emit('close')
}
const spinning = ref(false)
const images = ref([])

const loadProcessImg = async () => {
	const res = await getDicitemList({ parentCode: 'process_img' })
	if (isResponseSuccess(res)) {
		images.value = res.data.data.map(item => item.itemName)
		console.log('output-> images.value', images.value)
	}
}

watch(() => props.visible, () => {
	if(props.visible) {
		loadProcessImg()
	}
})
</script>

<style scoped>
.swiper-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

.modal-content {
	position: relative;
	width: 80%;
	max-width: 1600px;
	background-color: rgba(0, 0, 0, 0);
	padding: 20px;
	border-radius: 8px;
	z-index: 1001;
}

.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 24px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 1002;
}

.swiper-container {
	width: 100%;
	height: 1100px;
}

.slide-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
</style>

使用

<a-button @click="onShowModal" class="process-btn" type="primary">查看</a-button>

	<SwiperModal
		:visible="showModal"
		@close="showModal = false"
	/>

const onShowModal = async () => {
		showModal.value = true
}

const showModal = ref(false);