在nuxt中使用swiper无法引入module

​

 项目需要用到swiper

类似这种结构

​

在用swiper和slide标签组件的时候没有问题

就是没有左右切换和分页器，就是引入模块的问题

在swiper给出的vue代码模板中引入了 

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";
import "swiper/css/navigation";

import "./style.css";

在我的nuxt项目中复制上述代码，报错：找不到模块

解决方法：

对于左右切换的按钮，自己写样式如下

        <div
          class="swiper-pagination absolute w-100px bottom-10% flex justify-around align-center"
        >
          <span
            class="iconfont icon-arrow-left-filling"
            :class="disableLeft ? 'icon-arrow-left-filling-disable' : ''"
            @click="turnLeft"
            //点击左边就触发turnLeft函数
          ></span
          >{{ kvIndex + 1 }}/{{ list.length }}
          <span
            class="iconfont icon-arrow-right-filling"
            :class="disable ? 'icon-arrow-right-filling-disable' : ''"
            @click="turnRight"
          ></span>
        </div>

turnLeft函数：

    turnLeft() {
      const swiper = this.$refs.swiper.$swiper;
      console.log("swiper", swiper);
      swiper.slidePrev();
      if (this.kvIndex == 0) {
        this.disableLeft = true;
        this.disable = false;
      }
    },

其实就是调用了swiper的slidePrev方法。

=======================================================

还可以拿到当前页面是第几页：

ref绑定的是swiper标签

    slideChange() {
      this.kvIndex = this.$refs.swiper.$swiper.realIndex;
      console.log("this.kvIndex", this.kvIndex);
    },

跳转到指定的页面

 selectIndicator(index) {
      this.kvIndex = index;
      this.$refs.swiper.$swiper.slideTo(index);
    },

​