vue3使用swiper EffectFade

在Vue3中使用swiper EffectFade，需要在组件中引入swiper，然后在mounted钩子函数中初始化swiper，并设置EffectFade效果。

以下是一个示例代码：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://picsum.photos/800/600?random=1" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/800/600?random=2" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/800/600?random=3" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    const mySwiper = new Swiper('.swiper-container', {
      effect: 'fade',
      fadeEffect: {
        crossFade: true
      }
    });
  }
}
</script>

<style>
.swiper-slide {
  text-align: center;
}
.swiper-slide img {
  max-width: 100%;
  height: auto;
}
</style>

在上面的代码中，我们通过import引入了swiper，然后在mounted钩子函数中初始化了一个swiper对象，并设置了EffectFade效果。其中，effect属性设置为'fade'，fadeEffect属性设置为{crossFade: true}，表示开启淡入淡出效果。

最后，我们在模板中添加了swiper的HTML结构，并在样式中设置了图片的最大宽度和高度自适应。