ElementUI Carousel 取消hover暂停轮播的默认行为

Shirley~~2026-03-18 10:03

Carousel 在根节点上绑定了 mouseenter 和 mouseleave：

复制代码

// carousel 源码中的模板`
`on:` `{`
  `mouseenter:` `function($event)` `{`
      `_vm.handleMouseEnter($event)`              
  `},`
  `mouseleave:` `function($event)` `{`
      `_vm.handleMouseLeave($event)` 
  `}`
`}`
`

默认handleMouseEnter和handleMouseLeave事件为：鼠标移入的时候会暂停轮播，鼠标移出会恢复轮播。

复制代码

handleMouseEnter()` `{`
  `this.hover =` `true;`   `// 用于控制箭头显示`
  `this.pauseTimer();`   `// 暂停轮播`
`},`
`handleMouseLeave()` `{`
  `this.hover =` `false;`
  `this.startTimer();`   `// 恢复轮播`
`}`
`

取消轮播方式，重写这两个方法：

复制代码

` `<el-carousel ref="bannerCarousel"` `:height="bannerHeight"` `:interval="3000" arrow="hover" indicator-position="none" @change="onBannerChange">`
        `<el-carousel-item v-for="(slide, index) in slides"` `:key="slide.key">`
          `<div class="banner-slide">`
            `<img class="banner-img"` `:src="shouldLoadBanner(index) ? getBannerImgUrl(slide.img) : ''"` `:alt="slide.title"/>`
          `</div>`
        `</el-carousel-item>`
      `</el-carousel>`
`

复制代码

const carousel =` `this.$refs.bannerCarousel`
`carousel.handleMouseEnter` `=` `function` `()` `{` 
    `this.hover =` `true` 
`}`
`carousel.handleMouseLeave` `=` `function` `()` `{` 
    `this.hover =` `false` 
`}`
`