vue2 在 nuxt.js 中使用vue-awesome-swiper3.1.3配置及报错

大家好，欢迎来到IT知识分享网。

第一次用的人可能会报如上错误。解决方法如下

配置

在 ssr 的环境中，和 SPA 不同，需要一个配置

在plugins文件夹新建swiper.js （文件名可自定义）

参考链接`https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3`

内容如下：

// If used in nuxt.js/ssr, you should keep it only in browser build environment if (process.browser) { // 也有些 process.client 的 const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr') Vue.use(VueAwesomeSwiper) }

在nuxt.config.js的plugins里配置

css: [ 'swiper/css/swiper.min.css', ], plugins: [ {src:'@/plugins/swiper',ssr: false}, ],

使用

 <div v-swiper:mySwiper="swiperOption" class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> </div> <div class="swiper-pagination"></div> </div>

结束

通过上面的配置，配置就完成了，就没问题了。

仍然报错

很多人配置完，还是报错，如下，是吧？

再看看“使用”部分和你的代码有什么不同。

1. v-swiper:mySwiper=”swiperOption” 这个写法大家应该都注意到了
2. div，没错，不用 swiper 标签了，把 swiper 改成 div
3. 同样 swiper-slide 也要改div,但是加上 class=”swiper-slide”
4. 删除页面中 import 的 swiper

还是报错 getComputedStyle on Window:parameter 1 is not of type ‘Element’

各种尝试一直报这个错误，有的说外层的 class 必须是 swiper-wraper,还有的说是 swiper-container,结果都不行。

解决方案

上面说了吧 swiper 改成 div，但是这还没完，还需要在原来的结构外再嵌套一层 div，然后把额外嵌套的这个作为 swiper 对象元素就可以了。

// 原来的直接把 swiper 改成 div 的结构,报错 <div v-swiper:swiperTop1="swiperOptionTop" ref="swiperTop" @slideChange="onSlideChange" class="swiper-wrapper gallery-top"> <div class="swiper-slide" v-for="item in showImgs()" :key="item.id"> <img :src="item.picUrl" @click="openNewWindow(item.forward)" class="gallery-img" /> </div> </div> // 生效的结构，在外需要再嵌套一层 div，把绑定的属性，事件放到这层上 <div v-swiper:swiperTop1="swiperOptionTop" ref="swiperTop" @slideChange="onSlideChange"> <div class="swiper-wrapper gallery-top"> <div class="swiper-slide" v-for="item in showImgs()" :key="item.id"> <img :src="item.picUrl" @click="openNewWindow(item.forward)" class="gallery-img" /> </div> </div> </div>

又来新的坑，上下不联动，联动出错

下面的链接是我参考的官网实例

https://github.com/surmon-china/surmon-china.github.io/blob/vue2/projects/vue-awesome-swiper/examples/30-thumbs-gallery.vue

我做的是这种上下联动的，结果联动失败

// 注意判断图片是否存在 if (this.showImgs().length > 1) { this.$nextTick(() => { const swiperTop = this.$refs.swiperTop.swiper; const swiperThumbs = this.$refs.swiperThumbs.swiper; swiperTop.controller.control = swiperThumbs; // swiperThumbs.controller.control = swiperTop; // 把这行得注释掉 }); }

索引获取出错

刚开始我`this.$refs.swiperTop.swiper.realIndex` 来获取，结果错误

var realIndex = (this.$refs.swiperTop.swiper.activeIndex - 1 + imgsLen) % imgsLen;