nuxt使用vue-awesome-swiper组件采坑记录

商城项目使用nuxt架构

使用轮播图,选择了时下最热门的vue-awesome-swiper作为基础组件。但是使用过程中遇到的坑,真的很难受

nuxt的版本是2.14.6

在vuecli中构建使用vue-awesome-swiper组件没有任何问题,
但是加上ssr就一直会报错,原生组件的切换上一个下一个的按钮不显示,即便是显示了点击也不会生效,后面排查也不知道是不是电脑硬件的问题,我们使用要求切换按钮需要自定义(包括按钮行为)

这儿直接上我们目前的组件代码






需要特别注意的是,,这里的slot,在页面内使用要用v-slot的方式,这儿v-slot简写,不清楚的去vue官网查看

class="sweiper-slide"这个属性不能丢掉,这是sweiper源码获取子元素用的


    

参考文章: nuxt使用vue-awesome-sweiper采坑

你可能感兴趣的:(nuxt使用vue-awesome-swiper组件采坑记录)