vue-awesome-swiper@4 在v2项目的模板

vue-awesome-swiper@4 在v2项目的模板

我在练习时常用的vue-awesome-swiper@4模板,欢迎补充!

<template>
	<Swiper style="height: 100%" ref="mySwiper" :options="options">
          <SwiperSlide v-for="(item, index) in bannerArr" :key="index">
            <img :src="item.imgUrl" alt="" />
          </SwiperSlide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
   </Swiper>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "xxx",
  computed: {
    ...mapState({
      data数据: (state) => state.仓库名.state数据,
    }),
    mySwiper() {
      return this.$refs.mySwiper;
    },
  },
  data() {
    return {
      options: {
        // 自动切换
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        // 环路
        loop: true,
        // 前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 切换效果cube
        effect: "cube",
      },
    };
  },
  mounted() {
    this.mySwiper.$el.onmouseenter = () => {
      this.mySwiper.$swiper.autoplay.stop();
    };
    this.mySwiper.$el.onmouseleave = () => {
      this.mySwiper.$swiper.autoplay.start();
    };
  },
};
</script>

main.js入口文件里声明swiper全局组件:

import {Swiper,SwiperSlide} from 'vue-awesome-swiper'
import "swiper/css/swiper.min.css";
Vue.component('Swiper',Swiper)
Vue.component('SwiperSlide',SwiperSlide)