vue使用swiper

文章引用vue使用swiper

这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，
不需要这个大佬的awesome插件了，所以就有了很多问题。
其中的重点是组件使用的是大佬的组件，原因就是swiper/vue下找不到这些组件，然后参数类也是用的options来传参，但是事件都是直接绑定到swiper上。通过ref来访问实例。

1. 局部使用：

<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions" @swiper="onSwiper" @click="gg" 
          @slideChange="onSlideChange">
            <swiper-slide>1</swiper-slide>
            <swiper-slide>2</swiper-slide>
            <swiper-slide>3</swiper-slide>
        </swiper>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
    // Import Swiper Vue.js components
    import 'swiper/swiper-bundle.min.css' 导入样式
    import {
        Swiper,
        SwiperSlide,
    } from 'vue-awesome-swiper';  使用大佬包装的组件
    import SwiperCore, {  使用swiper6的模组扩展
        Autoplay,
        Navigation
    } from 'swiper';
    // Import Swiper styles
    SwiperCore.use([Navigation, Autoplay]); 注册模块

    export default {
        data() {
            return {
                swiperOptions: {
                    slidesPerView: 3,
                    grabCursor:true,
                    spaceBetween: 50,
                    centeredSlides: true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                }
            }
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        methods: {
            onSwiper(swiper) {
                console.log(swiper)
            },
            onSlideChange() {
                console.log('slide change');
            },
            gg(){
                console.log('click');
            }
        },
        mounted() {
            this.swiper.slideTo(3, 1000, false)
        }
    };
</script>

1. 全局使用

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   import VueAwesomeSwiper from 'vue-awesome-swiper' 导入两个组件
   // import style (>= Swiper 6.x)
   import 'swiper/swiper-bundle.min.css' 使用样式
   import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';导入模组
   SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);使用模组
   Vue.use(VueAwesomeSwiper, /* { default options with global component } */)全局注册插件
   
   Vue.config.productionTip = false
   
   new Vue({
     router,
     store,
     render: h => h(App)
   }).$mount('#app')

   我是用的是局部，全局没有测试。