<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper" ref="mySwiper" :options="swiperOptions">
<div class="swiper-slide" v-for="carousel in bannerList" :key="carousel.id">
<img :src="carousel.imgUrl" />
div>
div>
<div class="swiper-pagination">div>
<div class="swiper-button-prev">div>
<div class="swiper-button-next">div>
div>
<script>
//引入swiper,就是这里有问题
import {Swiper} from 'swiper'
export default {
name: 'MyListContainer',
computed: {
...mapState({
bannerList: state => state.home.bannerList
})
},
mounted() {
//通知vuex发请求,获取数据并存储于state中
this.$store.dispatch('getBannerList')
//轮播图的swiper实例化
setTimeout(() => {
//这里mySwiper一直提示已声明“mySwiper”,但从未读取其值
var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable:true
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
},1000)
},
}
script>
//引入swiper样式,main.js里只有这一句
import 'swiper/css/swiper.css'
安装依赖了吗
我看文档是这样引入的
import { Swiper, SwiperSlide } from 'swiper/vue';
鼠标移到问题那里系统提示的解决方法是尝试使用 npm i --save-dev @types/swiper
(如果存在),或者添加一个包含 declare module 'swiper';
的新声明(.d.ts)文件,但我不知道怎么搞
这个问题解决了吗 我也被这个问题折磨了