onMounted(() => {
const options = {
slidesPerView: 'auto',
freeMode: true,
spaceBetween: 12,
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
observeSlideChildren: true,
navigation: {
nextEl: .${props.nextButtonName}, // 点击下一张
prevEl: .${props.prevButtonName}, // 点击上一张
},
on: {
// swiper切换时执行
slideChange(el: { activeIndex: number}) {
需要执行的函数代码
activeIndex 当前轮播图下标
},
},
}
if (props.paginationName) {
Object.assign(options, {
pagination: {
el: .${props.paginationName},
clickable: true,
},
})
}
const swiperInstance = new Swiper(props.id ? #${props.id} : swiperRef.value, options);
});