如何为Vuetify Slide-Group实现定时自动右滑的循环轮播效果

完全可以实现3秒自动右滑、滑到末尾自动回到初始位置的循环轮播效果。不推荐硬绑定箭头点击的实现方式，直接调用组件暴露的内置API稳定性更高，两种实现方式的可运行代码如下。

方案1：调用组件内置方法（推荐） #

核心逻辑：

• 为v-slide-group绑定ref获取组件实例
• 组件挂载时启动3秒间隔的定时器，卸载时清除定时器避免内存泄漏
• 每次定时触发时判断当前是否已滑动到最后一项：是则调用reset()方法回到初始位置，否则调用next()方法向右滑动一项

<template>
  <v-slide-group ref="slideGroupRef">
    <!-- 替换为你自己的轮播slide项，写法和官方伪轮播示例一致 -->
    <v-slide-item v-for="item in slideList" :key="item.id" class="ma-4">
      <v-card width="200" height="200" class="d-flex align-center justify-center">
        {{ item.content }}
      </v-card>
    </v-slide-item>
  </v-slide-group>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const slideGroupRef = ref(null)
let autoPlayTimer = null
// 替换为你自己的轮播数据
const slideList = ref(Array.from({length: 6}, (_, i) => ({id: i+1, content: `幻灯片${i+1}`})))

const runAutoPlay = () => {
  if (!slideGroupRef.value) return
  // 校验是否已到达最后一个滑项
  const reachLast = slideGroupRef.value.items.every(slideItem => {
    return slideGroupRef.value.isOverflowed(slideItem) && !slideGroupRef.value.isVisible(slideItem)
  })
  if (reachLast) {
    slideGroupRef.value.reset()
    return
  }
  slideGroupRef.value.next()
}

onMounted(() => {
  autoPlayTimer = setInterval(runAutoPlay, 3000)
})

onBeforeUnmount(() => {
  if (autoPlayTimer) clearInterval(autoPlayTimer)
})
</script>

方案2：定时触发右箭头点击（你提到的实现思路） #

核心逻辑：

• 开启v-slide-group的show-arrows属性显示切换箭头
• 定时器触发时通过DOM查找获取右箭头按钮，触发其原生click事件
• 末尾判断、定时器启停逻辑和方案1一致
  注意：该方案依赖组件DOM结构，若Vuetify版本迭代修改了箭头类名会导致失效，优先选择方案1

<template>
  <v-slide-group ref="slideGroupRef" show-arrows>
    <v-slide-item v-for="item in slideList" :key="item.id" class="ma-4">
      <v-card width="200" height="200" class="d-flex align-center justify-center">
        {{ item.content }}
      </v-card>
    </v-slide-item>
  </v-slide-group>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const slideGroupRef = ref(null)
let autoPlayTimer = null
const slideList = ref(Array.from({length: 6}, (_, i) => ({id: i+1, content: `幻灯片${i+1}`})))

const runAutoPlayByClick = () => {
  if (!slideGroupRef.value) return
  const reachLast = slideGroupRef.value.items.every(slideItem => {
    return slideGroupRef.value.isOverflowed(slideItem) && !slideGroupRef.value.isVisible(slideItem)
  })
  if (reachLast) {
    slideGroupRef.value.reset()
    return
  }
  // 获取右箭头按钮触发点击
  const nextBtn = slideGroupRef.value.$el.querySelector('.v-slide-group__next')
  nextBtn?.click()
}

onMounted(() => {
  autoPlayTimer = setInterval(runAutoPlayByClick, 3000)
})

onBeforeUnmount(() => {
  if (autoPlayTimer) clearInterval(autoPlayTimer)
})
</script>

扩展功能：如果需要实现鼠标悬停暂停轮播，只需给组件绑定mouseenter事件时清除定时器，绑定mouseleave事件时重新启动定时器即可。

内容的提问来源于stack exchange，提问作者John'Sters