vue中使用swiper实现轮播图功能,package.json使用版本如下

      "swiper": "^5.4.5",
      "vue-awesome-swiper": "^4.1.1",

在chrome中轮播图功能正常使用,是用ie11访问时,页面加载产生异常<SCRIPT1002: 语法错误>

参考ie 报 SCRIPT1002: 语法错误

将package.json中版本调整
     "swiper": "^3.4.2",
     "vue-awesome-swiper": "^2.6.7",
使用ie11可以正常访问,轮播图功能失效,导致图片垂直排列

查看vue-awesome-swiper文档
发现在语法和导包上有区别,例Local Registration

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}


// import style (<= Swiper 3.x)
import 'swiper/dist/css/swiper.css'  
export default {
  components: {
    swiper,
    swiperSlide
  }
}

盲点注意: 组件字母大小写区别
5.x : Swiper, SwiperSlide
3.x :swiper, swiperSlide

Logo

前往低代码交流专区

更多推荐