有时候，我们会有这样的需求，在项目的前端页面中需要使用一个swiper插件，来实现图片轮播，但是nuxt是在服务端进行编译的，那么问题来了，我们如何像在vue中那样使用第三方模块，封装轮播公用组件呢？答案是：使用nuxt到插件功能。
官方文档：
Nuxt.js允许在实例化Vue.js应用程序之前运行js插件。这在您需要使用自己的库或第三方模块时特别有用。
下面就是一个封装swiper轮播插件到用例。
在nuxt.config.js文件中进行如下配置
...
plugins: [
{ src: '~/plugins/swiper.js', ssr: false },
{ src: '~/plugins/getRequest.js', ssr: false },
{ src: '~/plugins/rem.js', ssr: false },
]
...
在plugins文件夹下新建swiper.js文件，并进行如下编辑
import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
在components文件下面新建banner.vue文件，创建组件
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in bannerData" :key="index">
<img
class="banner-img"
:src="item.content"
:bannerSeq="item.bannerSeq"
:location1="item.location"
:sequence="item.sequence"
:remark="item.remark"
:ga-data="item.buryPoint"
alt
>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</template>
<script>
export default {
props: ["bannerData"],
data() {
return {
swiperOption: {
loop: true,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 0,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true
},
on: {
slideChange() {
// console.log("onSlideChangeEnd", this);
},
tap() {
// console.log("onTap", this);
}
}
}
};
},
computed: {},
created() {
// 合并用户设置的参数
this.swiperOption = Object.assign(this.swiperOption, this.options);
}
};
</script>
<style lang='less'>
</style>
在线项目中使用
<template>
<div>
<v-banner :bannerData="bannerData"></v-banner>
</div>
</template>
<script>
import vBanner from "@/components/web/banner";
export default {
components: {
vBanner
},
data() {
return {
bannerData: {}
};
},
// 获取banner数据
async asyncData(content) {
const res = await content.$axios.$post("/api/getFDBanner", { location: "88" });
if (res.resultCode === "1") {
return { bannerData: res.resultdata };
}
}
};
</script>
<style lang="less">
</style>