swiper6+用法（vue3）

对比一下6版本之前的用法（vue2）：

  <div class="swipe_box">
      <swiper ref="mySwiper" :options="swiperOption">
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
        <div slot="button-prev" class="swiper-button-prev" />
        <div slot="button-next" class="swiper-button-next" />
      </swiper>
    </div>

   option参数直接是一个对象，所有属性都放在此对象里面。

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper.scss'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      list: [],
      swiperOption: {
        initialSlide: 1,
        slidesPerView: 1.4,
        spaceBetween: 1,
        centeredSlides: true,
        loop: false,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许分页点击跳转
        },
        coverflowEffect: {
          rotate: 20, // slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 100, // 每个slide之间的拉伸值，越大slide靠得越紧。
          depth: 100, // slide的位置深度。值越大z轴距离越远，看起来越小。
          modifier: 1, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows: false // 开启slide阴影。默认 true。
        },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },

}
</script>

swiper6+用法（vue3）：

 <swiper
        :coverflow-effect="swiperOption.coverflow"
        :effect="'coverflow'"
        :loop="true"
        :slides-per-view="2.8"
        :navigation="swiperOption.navigation"
        class="swiper-container"
        :pagination="swiperOption">
        <swiper-slide class="swiper-slide">
          <div class="swiperImage">
            <img src="../../assets/images/HOME2.png" alt="" />
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <div class="swiperImage">
            <img src="../../assets/images/HomePod.png" alt="" />
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <div class="swiperImage">
            <img src="../../assets/images/HOME2.png" alt="" />
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <div class="swiperImage">
            <img src="../../assets/images/HomePod.png" alt="" />
          </div>
        </swiper-slide>
        <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-prev">
          <!-- <img src="../../assets/images/prev2.png" alt="" /> -->
        </div>
        <div class="swiper-button-next">
          <!-- <img src="../../assets/images/next2.png" alt="" /> -->
        </div>
      </swiper>

 ！！！！！！！属性分开了，不再是在option一个属性里面！！！！！属性的名字基本没变，还是可以用之前的属性，参考官网，可以直接单独配置。

<script setup>
import { reactive } from 'vue'
import SwiperCore, { EffectCoverflow, Navigation, Pagination, A11y, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.min.css'
import 'swiper/components/pagination/pagination.scss'
SwiperCore.use([Navigation, Pagination, EffectCoverflow, A11y, Autoplay])
let swiperOption = reactive({
  // autoplay: {
  //   delay: 2000,
  //   disableOnInteraction: false,
  // },
  coverflow: {
    rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
    stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。
    depth: 150, //slide的位置深度。值越大z轴距离越远，看起来越小。
    modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    slideShadows: false, //开启slide阴影。默认 true。
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
</script>

我真的谢。

还有，vue3用法如果用了语法糖就不用再将变量return出去。