Vue swiper vue-swesome-swiper最新版本正确显示分页与导航

npm install swiper vue-awesome-swiper --save -dev

如果是正常安装vue-awesome-swiper插件的话, 会发现分页按钮渲染出来是空, 还会有其他的各种问题存在, 目前网上也是各种杂七杂八的解决方法, 不乏一堆人让你降版本, 搞来搞去都搞乱了, 不够优雅. 这里分享本菜鸟捣鼓了半天找到的最靠谱的解决方法, 本人用的版本目前是vue-awesome-swiper 4.1.1 swiper6.0.4, 版本挺新的, 用下面的方法亲测有效.

全局引入

确保你的main.js里有以下代码:

import Vue from 'vue';
import {
  Swiper as SwiperClass, Pagination, Mousewheel, Autoplay
} from 'swiper/swiper.esm';
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter';
import 'swiper/swiper-bundle.css';

SwiperClass.use([Pagination, Mousewheel, Autoplay]);
Vue.use(getAwesomeSwiper(SwiperClass));
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass);

组件里的使用方法示例:

<template>
  <div class="direct">
    <div
      v-swiper:mySwiper="swiperOption"
    >
      <div
        class="swiper-wrapper"
      >
        <div
          v-for="item in projectList"
          :key="item.pid"
          class="swiper-slide"
        >
          <li
            @mouseenter="enter($event)"
            @mouseleave="leave($event)"
          >
            <img
              class="img"
              :src="require('@/assets/images/projects/' + item.img)"
            >
            <p>
              <span>
                {{ item.subtitle }}
              </span>
            </p>
          </li>
        </div>
      </div>
      <div class="swiper-pagination" />
    </div>
  </div>
</template>

<script>
  data() {
    return {
      swiperOption: {
          // 自己查阅api写自己需要的配置
        slidesPerView: 3,
        slidesPerColumn: 2,
        slidesPerColumnFill: 'column',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    console.log('Current Swiper instance object', this.mySwiper);
  },
  </script>

方法的出处:

github.com/surmon-chin…