swiper5在vue中的运用和组件化处理

背景：
最近接触了一个需要使用swiper插件的pc端企业业务展示页面。由于页面需要用到很多个不同的swiper效果。所以准备做一个公共的组件来使用，只用通过引入组件改变传进去的参数来使用

实际操作中遇到的问题

1、多个组件swiperOption设置的时候button 的class使用的是同一个引入的时候就造成了有左右移动点击按钮的时候没有个体化都变成了点一个改变多个的情况

解决方案 ：将按钮的左右键的class动态化传递
后期优化：应该可以通过对swiper外层或者swiper的class 实现动态传递应该是可以了，这样就不用更改按钮的class了。（后期有实际效果了再说）

2、swiper点击事件

这个由于swiper使用了loop 自己多虚拟创建了几个slider 这样点击方法直接写到swiper上不会每个模块都能反应。点击虚拟的部分item是没有效果的。
所以需要在swiperOption里面on里面设置click方法获取到当前的值用于点击的时候弹窗内容展示等。
a.在data中的swiperOption中加click但是里面this指示的是swiper
b.在created方法中通过this.swiperOption.on(click,function(){}) 通过在created里面使用let that = this来实现在组建中全局变量的使用