使用 nuxt 开发网站 之 常用插件 swiper、toast、axios

• axios 插件  是最常用的啦，这里用的是nuxt 给的列子，没啥特别的，够用，

  export default function ({ $axios}) {
    $axios.onRequest((config) => {
      return config
    })
    $axios.onResponse((response) => {
      if (response.status == 200) {
        return response.data
      }
    })
    $axios.onError(err => {
      return Promise.reject(err)
    })
  }

  当然如果有需要一些特别的处理，比如header 上需要带参数，你也可以自己create，官方文档里说的很清楚了，这里不再重复。

• toast 插件 也是需要的呢，我这里用的是ui 组件使用的是 bootstrap-vue ：

  import Vue from 'vue'
  import { ToastPlugin } from 'bootstrap-vue'
  
  Vue.use(ToastPlugin)

   

• swiper 插件 说起这个插件，开始使用时因为安装时，依赖版本不匹配，还有写小波折。当然这里已经把坑填好了：安装依赖 swiper@5.2.0  vue-awesome-swiper@^4.1.1 这里版本你好已经标出来了哦，直接安装后使用时会有问题，一定得注意。

  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  import 'swiper/css/swiper.min.css'
  
  
  Vue.use(VueAwesomeSwiper)

   

• 这里我封装了一个 fullscreenBanner 组件也可以分享给大家，全屏轮播组件：

  <template>
    <swiper :options="options"  style="width:100%">
          <swiper-slide v-for="(item,index) in bannerList" :key="index">
              <b-link href="#" class="nav-link p-0">
                  <!-- 图片 -->
                  <b-img v-if="item.type == 'image'" :src="item.image" class="banner-media"></b-img>
                  <video v-else :src="item.image" class="banner-media" loop muted autoplay ></video>
                  <!-- 文字内容 -->
                  <div v-if="item.title || item.sub_text" class="carousel-caption"></div>
                  <div class="banner-content" v-if="item.title || item.sub_text">
                      <p class="title" v-html="item.title"></p>
                      <p class="subtitle" v-html="item.sub_text"></p>
                  </div>
              </b-link>
          </swiper-slide>
          <div class="swiper-pagination banner" slot="pagination"></div>
      </swiper>
  </template>
  
  <script>
  export default {
      name:"fullscreenBanner",
      props:{
          options:{
              type:Object,
              default:()=>{
                  return{
                      slidesPerView: 1,
                      watchSlidesVisibility:true,
                      observer: true,//修改swiper自己或子元素时，自动初始化swiper
                      observeParents: true,//修改swiper的父元素时，自动初始化swiper
                      // loop:true,
                      // loopAdditionalSlides:0,//loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
                      on: {
                          slideChangeTransitionStart: function() {
                              let cur = this.slides[this.activeIndex].children[0].children[0] // 当前
                              let pre = this.slides[this.previousIndex].children[0].children[0] // 前一个
                              if(pre.tagName == 'VIDEO'){
                                  pre.pause() // 暂停之前的
                              }
                              if(cur.tagName == 'VIDEO'){
                                  cur.play() // 当前的自动播放
                              }
                          }
                      },
                      pagination: {
                          el: '.swiper-pagination',
                          clickable: true //点击分页器的指示点分页器控制Swiper切换
                      },
                  }
              }
          },
          bannerList:{
              type:Array,
              default:()=>{
                  return []
              }
          }
      },
      data(){
          return{
              
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .banner{
      bottom: 3.75rem;
  }
  .banner /deep/ .swiper-pagination-bullet{
      box-sizing: border-box;
      border: none;
      width: 0.75rem;
      height: 0.75rem;
      background: #FFFFFF;
      opacity: 0.6;
      border-radius: 50%;
      margin-right: 0.94rem !important;
      margin-left: 0.94rem !important;
      transition: 0.3s;
  }
  .banner /deep/ .swiper-pagination-bullet-active{
      width: 3.38rem;
      height: 0.63rem;
      background: #FE5800;
      border-radius: 1rem;
      opacity: 1;
  }
  .banner-media{
      width:100%;
      height: 100vh;
      object-fit: cover; 
      display: block; 
  }
  .banner-content{
      position: absolute;
      right: 16%;
      bottom: 20px;
      left: 16%;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      text-align: center;
      transform: translateY(-50%);
      top: calc(50% + 6rem);
  
      .title{
          font-size: 4.5rem;
          font-family: AvantGarde Bk BT;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 5rem;
          white-space: pre-wrap;
      }
      .subtitle{
          font-size: 1.5rem;
          font-family: AvantGarde Bk BT;
          font-weight: normal;
          color: #EEEEEE;
          line-height: 2.25rem;
          white-space: pre-wrap;
      }
  }
  .carousel-caption{
      background: #070A11;
      opacity: 0.4;
      left: 0;
      top: 0;
      height: 100%;
      bottom: 0;
      right: 0;
      z-index: 2;
  }
  </style>

  就到这里，大家可以安心使用。