vue3.0中使用swiper

由于普通的ui组件库中的轮播图无法满足需求，因此使用了这个库。

效果图如下：

安装 npm i 现在下载默认6x版本的，6x版中封装了组件，可以在vue中直接使用。用法跟以前不一样！！ ，部分api也不对。

<template><div><a-row type="flex" justify="center"><a-col :xs="0" :sm="0" :md="0" :lg="20" :xl="20" class="swiper_box"><swiper:autoplay="swiper_options.autoplay":loop="swiper_options.loop":speed="swiper_options.speed":pagination="swiper_options.pagination":navigation="swiper_options.navigation":spaceBetween="swiper_options.spaceBetween":coverflowEffect="swiper_options.coverflowEffect":centeredSlides="swiper_options.centeredSlides":slidesPerView="swiper_options.slidesPerView"class="swiper"effect="coverflow"><swiper-slide><img class="my_swiper_imgs" src="../../../assets/1.jpg" alt=""/></swiper-slide><swiper-slide><img class="my_swiper_imgs" src="../../../assets/2.jpg" alt=""/></swiper-slide><swiper-slide><img class="my_swiper_imgs" src="../../../assets/3.jpg" alt=""/></swiper-slide></swiper></a-col></a-row></div>
</template>
<script>
import "./MySwiper.less";
import { reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.less";
import "swiper/components/navigation/navigation.less";
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);
export default {name: "MySwiper",components: {Swiper,SwiperSlide,},setup() {// swiper相关配置属性放在swiper_options这个变量里let swiper_options = reactive({autoplay: {disableOnInteraction: false, // 鼠标滑动后继续自动播放delay: 4000, //4秒切换一次},speed: 500, //切换过渡速度loop: true,slidesPerView: "auto", //解决最后一张切换到第一张中间的空白centeredSlides: true, //设置slide居中spaceBetween: 20,coverflowEffect: {// rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。stretch: 50, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。// slideShadows: false, //开启slide阴影。默认 true。},navigation: {nextElRef: ".swiper-button-next",prevElRef: ".swiper-button-prev",},pagination: {clickable: true,},});// 将swiper_options返回给模板中的swiper组件使用return { swiper_options };},
};
</script>

上述代码只说一样跟以前不一致的地方：

总结

在vue3.0中使用，整体下来的体验不太好，发现一个至今未解决的bug，项目打包后这个轮播图的小圆点和左右切换的按钮没有了。如果不是需要使用很多轮播图的话，更推荐自己写一个。