ShowEasyFrontEnd/FrontEnd/components/home/Partnership.vue

<template>
  <section class="tw-relative">
    <div class="swiper-container partnerWrapper xl:tw-max-w-[1060px] xl:tw-mx-auto">
      <div ref="partnerWrapper"
        class="swiper-wrapper tw-grid tw-grid-cols-2 tw-gap-x-[40px] tw-gap-y-[20px] md:tw-grid-cols-3 md:tw-gap-x-[36px] md:tw-gap-y-[19px] xl:tw-flex xl:tw-gap-0 xl:tw-grid-cols-none">
        <div
          class="swiper-slide partner tw-w-full xl:tw-flex xl:tw-justify-center xl:tw-items-center xl:tw-basis-1/5 xl:tw-max-w-[180px]"
          v-for="(item, index) in partnershiplist" :key="index">
          <img :src="item.image" />
        </div>
      </div>
    </div>
    <div class="swiper-button-prev partner tw-hidden xl:tw-block tw-h-[20px] tw-w-[12px]"></div>
    <div class="swiper-button-next partner tw-hidden xl:tw-block"></div>
  </section>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      partnerSwiper: null,
      windewWidth: 0,
    };
  },
  components: { Swiper },
  props: {
    partnershiplist: {
      type: Array,
    },
  },
  created() {
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      if (vm.windewWidth >= 1366) {
        vm.partnerSwiper = new Swiper(".swiper-container.partnerWrapper", {
          direction: "horizontal",
          initialSlide: 0,
          slidesPerView: 5,
          // centerInsufficientSlides: true,
          loop: true,
          loopedSlides: 0,
          autoplay: {
            disableOnInteraction: true,
            delay: 4000,
          },
          slidesPerGroup: 5,
          spaceBetween: 40,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          navigation: {
            nextEl: ".swiper-button-next.partner",
            prevEl: ".swiper-button-prev.partner",
          },
        });
        vm.partnerSwiper.init();
        vm.partnerSwiper.update();
        // vm.partnerSwiper.lazy.load();
      }
    })
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  watch: {
    windewWidth: {
      handler: function () {
        let vm = this;
        if (vm.windewWidth >= 1366) {
          vm.partnerSwiper = new Swiper(".swiper-container.partnerWrapper", {
            direction: "horizontal",
            initialSlide: 0,
            slidesPerView: 5,
            // centerInsufficientSlides: true,
            loop: true,
            loopedSlides: 0,
            autoplay: {
              disableOnInteraction: true,
              delay: 4000,
            },
            slidesPerGroup: 5,
            spaceBetween: 40,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            navigation: {
              nextEl: ".swiper-button-next.partner",
              prevEl: ".swiper-button-prev.partner",
            },
          });
          vm.partnerSwiper.init();
          vm.partnerSwiper.update();
        } else {
          if (this.partnerSwiper) {
            this.partnerSwiper.destroy(false);
            setTimeout(function () {
              vm.$refs.partnerWrapper.removeAttribute('style');
            }, 1000)
          }
        }
      },
    },
  },
  methods: {
    handleResize() {
      if (process.browser) {
        this.windewWidth = window.innerWidth;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-button {
  &-prev.partner {
    color: transparent;
    z-index: 4;

    width: 12px !important;
    height: 20px !important;

    &:after {
      background-image: url("~/assets/svg/swiperarrowleft.svg");
      background-position: center;
      background-repeat: no-repeat;

      // background-size: 100%;
      width: 12px !important;
      height: 20px !important;
    }

    &:focus-visible,
    &:focus {
      outline: none;
    }
  }

  &-next.partner {
    color: transparent;

    width: 12px;
    height: 20px;
    z-index: 4;

    &:after {
      background-image: url("~/assets/svg/swiperarrowright.svg");
      background-position: center;
      background-repeat: no-repeat;
      // background-size: 100%;

      width: 12px;
      height: 20px;
    }

    &:focus-visible,
    &:focus {
      outline: none;
    }
  }
}
</style>