Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
我的Swiper定义:
<div class="nyswiper-container" ref="my_swiper"> <div class="mySwiperWrapper"> <slot name="content"> </slot> </div> </div>
报错信息:
看了官网文档之后发现:
要保留默认名class:swiper-container。
批改之后:
<div class="swiper-container" ref="my_swiper"> <div class="mySwiperWrapper"> <slot name="content"> </slot> </div> </div>
持续报错,还是什么那个错。
查看GitHub:
他说须要个wrapper,然而我曾经定义了wrapper了,只不过名字不是swiper-wraper,
起初还是把类名改回来,我本认为只有定义了里面的container,外面的类名能够轻易写,只有合乎层级关系就好。
最初还是改回来原来的类名:
<div class="swiper-container" ref="my_swiper"> <div class="swiper-wrapper"> <slot name="content"> </slot> </div> </div>
最初不会报错了:
其实我曾经应用很屡次这个玩意了,之前是这样定义的:能够失常运行。
<div ref="school_swiper" class="swiper-container_home"> <div class="swiper-wrapper"> <div class="swiper-slide swiper_slide_home" v-for="(item, index) in imgList" :key="index" > <div></div> </div> </div> <div class="swiper-pagination" style="color:#ffffff"></div> </div>
所以我感觉,里面的类名能够批改,然而wrapper类名不能够批改,因为你即便改了里面的类名,因为你通过refs拿到里面这个container了,而后初始化了Swiper,Swiper外部还是感觉你这样的解决是对的。里面这个container我感觉次要是用来初始化用的,类名无需保留,这个和我看中文的swiper文档写的不一样,它说要保留,可能目标就是为了让用户恪守它的规定,避免报错吧。:
new Swiper(this.$refs.school_swiper, { loop: true, // 循环模式选项 width: window.innerWidth * 1, //分页器 pagination: { el: ".swiper-pagination", }, autoplay: { delay: 2000, disableOnInteraction: false, //用户触摸后静止敞开 }, })); },
最初订正swiper-slide类名也不能舍弃。。也要加上能力滑动,应用插槽时,间接在里面的组件中定义slide即可