vue-awesome-swiper开启loop模式后复制slide引出的问题及解决方案

标题已经很能说明问题了，我再详细介绍一下背景。

有一个数据展示的组件Card，里面会有指标的名称、数值以及近期的趋势图（echarts画的）。Card组件本身接收指标的基本信息，不包括趋势图的数据，趋势图的数据是Card自己再调接口获取的。用vue-swesome-swiper来显示多个Card，还需要开启loop模式。就这样我的噩梦开始了。

1. 部分Card上的交互失效了
2. 部分Card上的趋势图没出现

经过调查发现，开启loop后，swiper会在前后复制一些slide，但是它只复制了dom，并没有复制事件处理函数，因此这就解释了第一个问题的原因。这个的解决方案是，如果交互不复杂可以使用swiper上的click事件来处理，否则建议把交互去掉。而我选择了第二个方案，跟产品经理沟通把交互去掉，只做数据展示。

下面说说第二个问题。导致它的原因，也很简单。swiper在复制dom的时候Card发送的请求还没回来，即在swiper复制时根本就没有画出趋势图呢。找到原因下面就好解决了。我的做法是监控所有Card组件请求都回来，然后调用vue-awesome-swiper的updateSwiper方法来重新更新swiper。

最后再说一下，这个不能算是swiper的坑，swiper本身还是很强大的。在这里向swiper、vue-awesome-swiper致敬。

2020-08-07
真的好无助啊，结合echarts又出问题了，duplicate的canvas根本不起作用。我现在的解决方案是，把echarts设置成visibility: hidden。然后把echarts绘制的内容通过getDataURL转换成图片，以img的方式显示出来。不要想跟echarts有任何交互了，做不到:(

如果对你有用请帮忙点赞，嘻嘻:)