element写轮播图时,鼠标悬停不会停止,需要用到以下核心代码
@mouseenter.native="delHandleMouseEnter"
前情提要:此html代码外面是循环遍历出的div,div数量是后台返回的,而且里面还包含着轮播图,所以有几个div就有几个轮播图,因为是多个轮播图,所以后期需要循环遍历index
具体写法:
<div v-show="item.showBannerOrNo" class="block booth-banner">
<el-carousel
ref="carousel"
arrow="never"
indicator-position="none"
height="310px"
interval="2000"
@mouseenter.native="delHandleMouseEnter(index)"
>
<el-carousel-item v-for="items in booteBanners" :key="items.id">
<img :src="items.idView" alt="">
</el-carousel-item>
</el-carousel>
</div>
核心方法:
// 鼠标移入卡片banner不停止
delHandleMouseEnter(index) {
this.$refs.carousel[index].handleMouseEnter = () => {}
}
为了第一次鼠标进入就触发,需要在mounted方法中写,而且轮播图是多张,所以需要循环遍历index
mounted() {
this.$refs.carousel.forEach((item, index) => {
this.$refs.carousel[index].handleMouseEnter = () => {}
})
},