elementUI Carousel 走马灯原生效果:
当鼠标划入轮播图的原生效果会使轮播图停止轮播。
现要求鼠标划入轮播不停止,单单因为这个小需求而用原生JS重构一个轮播图又太浪费。
在node_modules—>element-UI—>packages中查看Carousel源码会发现:源码中加了两个鼠标移入事件。
如何修改原事件呢?
直接操作轮播组件的DOM元素,将有的函数替换掉就行了:
<el-carousel ref="carousel" :interval="3000" arrow="never" trigger="click" :autoplay="autoplay" @mouseenter.native="autoplayHandler">
<el-carousel-item v-for="(item, index) in 3" :key="item.index">
<div style="width: 100%; height: 100%" :class="`bg${index + 1}`"></div>
</el-carousel-item>
</el-carousel>