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