swiper6.0.0~6.1.3版本不支持vue3.0 Composition API吗?

发布于 2022-09-13 01:16:54 字数 2030 浏览 16 评论 0

在测试vue3.0使用swiper的时候,发现6.0.0~6.1.3版本swiper不能按照如下代码的方式实现轮播图功能,在测试的时候发现,执行npm install swiper@6.x.x之后(安装6.0.x~6.1.x的任意版本),node_modules文件夹下的swiper文件夹中不会生成如下文件夹及文件

外层也没有swiper-vue.cjs.js等与vue相关的文件生成
image.png

<template>
  <div>
    <swiper
      :autoplay="swiper_options.autoplay"
      :loop="swiper_options.loop"
      :speed="swiper_options.speed"
      :pagination="swiper_options.pagination"
      :navigation="swiper_options.navigation"
    >
      <swiper-slide>slide 1</swiper-slide>
      <swiper-slide>slide 2</swiper-slide>
      <swiper-slide>slide 3</swiper-slide>
      <swiper-slide>slide 4</swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { reactive } from "vue";
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";
//将swiper/vue换成swiper/bundle或swiper/core也不行
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/navigation/navigation.scss";
SwiperCore.use([Autoplay, Pagination, Navigation]);
export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    let swiper_options = reactive({
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      speed: 1000,
      pagination: {
        clickable: true
      },
      navigation: {
        clickable: true
      }
    });
    return { swiper_options };
  }
};
</script>
<style lang="css">
.swiper-container {
  height: 500px;
  width: 100%;
}
.swiper-wrapper {
  position: relative;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  text-align: center;
  line-height: 500px;
}
</style>

礼貌请教各位大佬们,出现这种情况的原因是什么呢?是swiper6.0.0~6.1.3版本不支持或者不完全支持vue3.0 Composition API吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

中性美 2022-09-20 01:16:54

没有很正常,它放在外层,你看下package.json的入口就知道了
"main": "../swiper-vue.cjs.js"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文