vue3+vite+ts引入swiper并使用

安装swiper版本

npm install [email protected]

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import { Autoplay } from "swiper";

let modules = [Autoplay];

      Slide 1
      Slide 2
      Slide 3
      Slide 4
      Slide 5
      Slide 6
    

因为我要实现的效果是竖行滚动，并且一页展示3条数据 所以 slidesPerView设置为3，direction设置为"'vertical'" ，一定记住必须是双引号里面再包单引号，不然没效果。

自动播放的话，就要引入模块

import { Autoplay } from "swiper";

let modules = [Autoplay];，

咱也不知道为啥这样写，反正swiper7官方文档是喊这样写的。

然后如果想移入暂停就要先获取到swiper对象，但是获取到的是响应式对象，所以需要先转换为非响应式

//定义swiperNew,目的获取非响应式swiper
let swiperNew: any;

//鼠标移入
const enter = () => {
  swiperNew.autoplay.stop();
};
//鼠标移出
const leave=()=>{
  swiperNew.autoplay.start();
}
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);  //拿到swiper对象再转换为非响应式
};

打印一下获取的对象

完事！！！！