vue-cli版本为 4.3 安装vue-awesome-swiper时没有指定版本,引发以下两个错误
1.图片不能再一行显示
2.图片无法滑动
原因:版本冲突、且css文件路径错误
解决办法: 之前安装的swiper依赖删掉,通过 npm install vue-awesome-swiper@2.6.7 -S 安装固定版本
补充说明: github上指定的swiper3版本对应的vue-awesome-swiper是2.6.7【https://github.com/surmon-china/vue-awesome-swiper】
<div class="recommend-body">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in recommendGoods " :key="index" >
<div class="recommend-item">
<img :src="item.image" width="80%">
<div>{{item.goodsName}}</div>
<div>¥{{item.price | moneyFilter}}(¥{{item.mallPrice | moneyFilter}})</div>
</div>
</swiper-slide>
</swiper>
</div>
//引入轮播组件
import {swiper , swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper ,
swiperSlide
},
data() {
return {
//轮播图组件,配置、指定每页显示图片数量
swiperOption:{
slidesPerView: 3
},
}
}
.recommend-body{
border-bottom:1px solid #eee;
}
.recommend-item{
width:99%;
border-right:1px solid #eee;
font-size:12px;
text-align: center;
}