在Nuxt.js中获取daisyui轮播组件当前活跃图片索引

问题说明 #

你用DaisyUI轮播做商品图展示，目前点击指示器能切换图片，但左右滑动轮播时，活跃指示器的样式没法同步更新——因为DaisyUI轮播靠浏览器锚点定位实现滑动，滑动时不会触发你手动绑定的@click事件，导致indicatorSelected变量没更新。

现有代码 #

<div class="relative mx-[-1rem] my-2">
    <div class="w-full carousel">
        <div v-for="(item, index) in product.Images" :id="'img' + index"
            class="carousel-item w-full">
            <NuxtImg :src="item" class="w-full" :alt="'Tailwind CSS Carousel component ' + index" />
        </div>
    </div>

    <div class="absolute bottom-[1%] flex justify-center w-full py-2 gap-1">
        <a v-for="(item, index) in product.Images" :href="'#img' + index" 
            class="btn btn-xs" :class="[ indicatorSelected == index ? 'text-red-600' : '' ]"
            @click="indicatorSelected = index">
            {{ index }}
        </a>
    </div>
</div>

两种可行解决方案 #

方案1：监听浏览器hash变化

DaisyUI滑动轮播后会修改URL的hash值（对应轮播项的锚点ID），我们可以监听这个变化来同步更新指示器状态：

1. 在组件的生命周期钩子中添加监听逻辑：

data() {
    return {
        indicatorSelected: 0 // 默认选中第一个指示器
    }
},
mounted() {
    // 初始化时同步当前活跃项
    this.syncIndicator()
    // 监听hash变化事件
    window.addEventListener('hashchange', this.syncIndicator)
},
beforeUnmount() {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('hashchange', this.syncIndicator)
},
methods: {
    syncIndicator() {
        const currentHash = window.location.hash
        if (currentHash.startsWith('#img')) {
            // 从hash中提取索引
            const index = parseInt(currentHash.replace('#img', ''))
            this.indicatorSelected = index
        } else {
            // 没有hash时默认选中第一个
            this.indicatorSelected = 0
        }
    }
}

方案2：监听DOM的active类变化

DaisyUI会给当前显示的轮播项自动加上carousel-item.active类，我们可以用MutationObserver监听这个类的变化来同步：

1. 添加DOM监听逻辑：

data() {
    return {
        indicatorSelected: 0,
        carouselObserver: null // 保存观察者实例
    }
},
mounted() {
    // 初始化同步
    this.syncIndicatorFromDOM()
    // 创建观察者，监听轮播项的类属性变化
    this.carouselObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                this.syncIndicatorFromDOM()
            }
        })
    })
    // 给所有轮播项添加监听
    document.querySelectorAll('.carousel-item').forEach(item => {
        this.carouselObserver.observe(item, { attributes: true })
    })
},
beforeUnmount() {
    // 销毁观察者
    if (this.carouselObserver) {
        this.carouselObserver.disconnect()
    }
},
methods: {
    syncIndicatorFromDOM() {
        const activeItem = document.querySelector('.carousel-item.active')
        if (activeItem) {
            const index = parseInt(activeItem.id.replace('img', ''))
            this.indicatorSelected = index
        }
    }
}

小优化：让指示器更美观 #

可以把数字指示器改成圆形按钮，视觉效果更贴合轮播场景：

<a v-for="(item, index) in product.Images" :href="'#img' + index" 
    class="btn btn-xs btn-circle" 
    :class="[ indicatorSelected == index ? 'bg-red-600' : 'bg-gray-300' ]"
    @click="indicatorSelected = index">
</a>

内容的提问来源于stack exchange，提问作者duongtt