swiper6.0.0~6.1.3版本不支持vue3.0 Composition API吗?
在测试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相关的文件生成
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
没有很正常,它放在外层,你看下package.json的入口就知道了
"main": "../swiper-vue.cjs.js"