vue3+ swiper8

swiper是一个非常好用的图片切换组件，但是vue3 + swiper8 版本的文档看上去会有点懵逼（一部分是因为版本太多了，一部分是因为很少用）

此处记录下我的使用方法：

安装：

npm i swiper

按照官网来使用：

html部分：（基本上常用的也就这些啦，在复杂的就真的要去啃书啦）

<swiper

　　// 在swiper标签添加模块属性  
　　:modules="modules"
　　// 垂直方向轮播 注意一定要有两对引号包裹 
　　:direction="'vertical'"
　　// 开启循环  
　　:loop="true"
    // 页面中一次显示几个图片
    :slides-per-view="3"
    // 轮播图之间的间距
    :space-between="50"
    //图片切换速度
    :speed="1200"
    //切换效果的配置，注意：切换效果在8版本里面需要引入相应的组件，还有相应的css样式
    :effect="'fade'"
    //是否展示分页器
    :navigation="true"
    //自动播放的配置
    :autoplay="{ delay: 10000, disableOnInteraction: false }"
    //图片切换监听
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
 </swiper>

ts部分：

//组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//需要的一些模块：自动播放，分页器，切换动画等等
import { Autoplay, Navigation, Scrollbar ,EffectFade} from 'swiper'
//引入相应的一堆样式
import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/effect-fade';
// 引入swiper核心和所需模块
import { Autoplay, Navigation, Scrollbar ,EffectFade} from 'swiper'
// 在modules加入要使用的模块
const modules = [ Navigation, Scrollbar,EffectFade]
//监听切换
const onSlideChange = (swiper) => {
        //返回的swiper会有很多的数据，往往我们只需要一个当前的下标就好了，直接使用下面的就能获取下标，注意此处下标从0开始
	swiperIndex.value = swiper.realIndex;
}    

附上文档：

https://swiperjs.com/swiper-api#events