在Vue2中使用swiper遇到的坑，swiper失去自动播放功能

前言

最近在使用swiper的时候，发现swiper居然不能自己播放了，赶紧找原因。。。
参考链接:在Vue低版本中使用swiper

安装需要的包

1.需要提前安装vue-awesome-swiper 包
npm install swiper vue-awesome-swiper --save
2.再安装swiper插件,注意：直接安装swiper出现的版本是最新版本，在使用时可能会出现问题，这里正好引用了最新版本，可参考解决方案
npm install --save swiper
3.在需要用到的地方引入刚安装的插件

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import SwiperCore, { Autoplay } from "swiper";
import "swiper/swiper.min.css";
//插件需要注入，==如果你不引用swiper的东西你会发现swiper不会自动播放==
SwiperCore.use([Autoplay])；

html代码，中间渲染了echarts组件，这个在其它文章会讲到

  <div class="chart-wrapper">
          <el-row :gutter="32">
            <swiper ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="(item, index) in classInfoArr" :key="index">
                <div class="classInfo">
                  <div>{{ index + 1 }}号线</div>
                  <p>生产工单:{{ item.order }}</p>
                  <p>产品编码:{{ item.code }}</p>
                  <p>产品名称:{{ item.name }}</p>
                  <class-info
                    :index="index"
                    :insideArr="item.insideArr"
                    :outSideArr="item.outSideArr"
                    :ref="'myEchart-' + index"
                  />
                </div>
              </swiper-slide>
            </swiper>
          </el-row>
        </div>

 swiperOptions: {
        slidesPerView: 5,//每次显示多少个
        loop: true,//是否循环
        autoplay: {//当你不单独的引用autoplay的话，这个属性添加在这里是没有效果的
          delay: 3000, //3秒切换一次
        },
        // Some Swiper option/callback...
      },

效果图如下：

总结

由于swiper太频繁的维护，导致bug较多，所以在引用swiper时，注意引入！在使用echarts渲染的时候，会发现swiper重复，并导致一些渲染不出来，这个时候就需要把部分swiper过滤掉！

补充

之前写得死数据，所以并未发现问题，但在请求接口之后，发现echarts在轮播第二遍时，出现延迟或者不渲染的情况，鼠标定位，发现找不到元素。

解决：

可以选择用vue的自定义指令解决这个问题：
复习：
Vue.directive(“mynewcode”,{bind:function(el,binding){…自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。