1 <template>
  2   <div class="swiper mySwiper">
  3     <div class="swiper-wrapper">
  4       <div class="swiper-slide">Slide 1</div>
  5       <div class="swiper-slide">Slide 2</div>
  6       <div class="swiper-slide">Slide 3</div>
  7       <div class="swiper-slide">Slide 4</div>
  8       <div class="swiper-slide">Slide 5</div>
  9       <div class="swiper-slide">Slide 6</div>
 10       <div class="swiper-slide">Slide 7</div>
 11       <div class="swiper-slide">Slide 8</div>
 12       <div class="swiper-slide">Slide 9</div>
 13       <div class="swiper-slide">Slide 10</div>
 14     </div>
 15     <!-- Add Pagination -->
 16     <div class="swiper-pagination"></div>
 17     <!-- Add Navigation -->
 18     <div class="swiper-button-prev"></div>
 19     <div class="swiper-button-next"></div>
 20     <!-- 添加函数开启监听轮播图的各种事件(点击，滑动...) -->
 21   </div>
 22 </template>
 23 <script>
 24 import Swiper from "swiper/swiper-bundle.min.js";
 25 import "swiper/swiper-bundle.min.css";
 26 
 27 export default {
 28   components: {},
 29   methods: {
 30     myPlugin({ swiper, extendParams, on }) {
 31       extendParams({
 32         debugger: false,
 33       });
 34 
 35       on("init", () => {
 36         if (!swiper.params.debugger) return;
 37         console.log("init");
 38       });
 39       on("click", (swiper, e) => {
 40         if (!swiper.params.debugger) return;
 41         console.log("click");
 42       });
 43       on("tap", (swiper, e) => {
 44         if (!swiper.params.debugger) return;
 45         console.log("tap");
 46       });
 47       on("doubleTap", (swiper, e) => {
 48         if (!swiper.params.debugger) return;
 49         console.log("doubleTap");
 50       });
 51       on("sliderMove", (swiper, e) => {
 52         if (!swiper.params.debugger) return;
 53         console.log("sliderMove");
 54       });
 55       on("slideChange", () => {
 56         if (!swiper.params.debugger) return;
 57         console.log(
 58           "slideChange",
 59           swiper.previousIndex,
 60           "->",
 61           swiper.activeIndex
 62         );
 63       });
 64       on("slideChangeTransitionStart", () => {
 65         if (!swiper.params.debugger) return;
 66         console.log("slideChangeTransitionStart");
 67       });
 68       on("slideChangeTransitionEnd", () => {
 69         if (!swiper.params.debugger) return;
 70         console.log("slideChangeTransitionEnd");
 71       });
 72       on("transitionStart", () => {
 73         if (!swiper.params.debugger) return;
 74         console.log("transitionStart");
 75       });
 76       on("transitionEnd", () => {
 77         if (!swiper.params.debugger) return;
 78         console.log("transitionEnd");
 79       });
 80       on("fromEdge", () => {
 81         if (!swiper.params.debugger) return;
 82         console.log("fromEdge");
 83       });
 84       on("reachBeginning", () => {
 85         if (!swiper.params.debugger) return;
 86         console.log("reachBeginning");
 87       });
 88       on("reachEnd", () => {
 89         if (!swiper.params.debugger) return;
 90         console.log("reachEnd");
 91       });
 92     },
 93   },
 94   mounted() {
 95     this.$nextTick(() => {
 96       // 创建swiper对象
 97       var swiper = new Swiper(".mySwiper", {
 98         modules: [this.myPlugin],
 99         pagination: {
100           el: ".swiper-pagination",
101           clickable: true,
102         },
103         navigation: {
104           nextEl: ".swiper-button-next",
105           prevEl: ".swiper-button-prev",
106         },
107         // Enable debugger
108         debugger: true,
109       });
110     });
111   },
112 };
113 </script>
114 
115 <style lang="scss" scoped>
116 .swiper {
117   width: 100%;
118   height: 500px;
119 }
120 
121 .swiper-slide {
122   text-align: center;
123   font-size: 18px;
124   background: #fff;
125 
126   /* Center slide text vertically */
127   display: -webkit-box;
128   display: -ms-flexbox;
129   display: -webkit-flex;
130   display: flex;
131   -webkit-box-pack: center;
132   -ms-flex-pack: center;
133   -webkit-justify-content: center;
134   justify-content: center;
135   -webkit-box-align: center;
136   -ms-flex-align: center;
137   -webkit-align-items: center;
138   align-items: center;
139 }
140 </style>