VUE 3D轮播图封装实现方法

<!--轮播图插件模板--><template></template><script type="text/ecmascript-6"> import {swiper, swiperSlide} from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css');//注意这里 import Pageination from "./pageination" import { mapActions, mapMutations, mapGetters, mapState} from "vuex" import {getPriceSymbolValue} from '../../util/tool/index' export default {  //props: ['bannerList'],  data() {   let _self=this;   return {    pageinationIndex:0,    data: {     "bannerList":[]    },    swiperOption: {     loop: true,  // 循环     speed:500,  //切换速度     mousewheelControl: false,// 禁止鼠标滚轮切换     lazy: {      loadPrevNext: true,     },     pagination: {      el: '.swiper-pagination',     },     autoplay: {      delay:2000,      stopOnLastSlide: false, // 切换到最后一个时不停止      disableOnInteraction: false, //用户操作swiper之后 不停止autoplay     },     watchSlidesProgress:true,     centeredSlides: true, //设定为true时，活动块会居中，而不是默认状态下的居左。     spaceBetween:10,     slidesPerView: 1.7,     loopedSlides :2,     observer: true,     observeParents: true    }   }  },  methods: {  },  mounted() {   // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法//   this.$nextTick(function() {//    this.swiper.slideTo(3, 10, false);//   });  },  computed: {   swiper() {    return this.$refs.mySwiper.swiper   }  },  components: {   swiper,   swiperSlide,   Pageination  } }</script><style lang="scss" type="text/scss"></style>