Nuxt3遇见的坑(二):Nuxt3 引入swiper
网上查了很多方法都不好使,最后看文档摸索了一个
先安装swiper,我的版本是6.0.0-alpha.18
yarn add swiper
在组件中引用
<template>
<div class="pageSwiper">
<div class="swiper-container swiper">
<transition :duration="duration">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in props.imgList"
:key="index"
>
<div class="swiperImg">
<img :src="item" alt="" />
</div>
</div>
</div>
</transition>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
</div>
</div>
</template>
<script setup lang="ts">
import Swiper, { Autoplay, Navigation } from 'swiper';
// swiper.less/sass/css 决定了基础的样式
import 'swiper/swiper.scss';
Swiper.use([Autoplay, Navigation]);
const props = defineProps<{
imgList: string[];
}>();
const duration = ref(0);
onMounted(() => {
const ss = new Swiper('.pageSwiper .swiper', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 14,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
on: {
progress: function (swiper, progress) {
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
let slideProgress = this.slides[i].progress;
let modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
let translate = slideProgress * modify * 260 + 'px';
let scale = 1 - Math.abs(slideProgress) / 5;
let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide[0].style.transform =
'translateX(' + translate + ') scale(' + scale + ')';
slide[0].style.zIndex = zIndex;
slide[0].style.opacity = 1;
if (Math.abs(slideProgress) > 3) {
slide[0].style.opacity = 0;
}
}
},
setTransition: function (swiper, transition) {
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
slide[0].style.transitionDuration = transition + 'ms';
}
},
},
});
});
swiper官网: https://swiperjs.com/vue
这样子引入swiper的时候,build的时候会出现问题
Swiper.use is not a function
// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: [‘swiper’],
},
})