点击非激活Swiper Slide内的按钮时如何阻止滑块切换？

问题根因 #

该现象是Swiper默认/手动开启了slideToClickedSlide配置导致的：点击非激活slide区域时，Swiper会自动滑动到对应slide。点击内部按钮时事件会冒泡到slide层，触发该滑动逻辑。
你之前设置的preventClicks参数仅用于阻止滑动过程中的点击误触发，对静态点击场景下的跳转逻辑无效，所以没有生效。

可选择的解决方案 #

方案1：全局关闭点击slide跳转 #

适用于不需要点击slide本身触发滑动的场景，直接在swiper组件上新增配置即可：

:slideToClickedSlide="false"

方案2：仅阻止按钮点击触发跳转 #

适用于点击slide本身仍需滑动、仅按钮点击不触发滑动的场景，给按钮点击事件添加.stop修饰符阻止事件冒泡到上层swiper-slide即可。
如果是自定义组件emit事件，可以直接在事件绑定处加修饰符：

<plan :plan="plan" @set-plan.stop="setPlan"/>

也可以在plan组件内部的按钮点击事件上添加修饰符：

<button @click.stop="触发setPlan的逻辑">选择方案</button>

方案3：兜底禁用方案 #

如果以上方案都不生效，可以完全禁用Swiper的slide点击交互，新增配置：

:allowSlideClick="false"

修改后的完整配置示例 #

<swiper :modules="modules"
        :scrollbar="{ draggable: true }"
        :navigation="{prevEl: '#prev-slide', nextEl: '#next-slide', disabledClass: 'opacity-50 pointer-events-none'}"
        :breakpoints="options.breakpoints"
        :slideToClickedSlide="false"
>
    <swiper-slide v-for="plan in plans" :key="plan.id">
        <plan :plan="plan" @set-plan.stop="setPlan"/>
    </swiper-slide>

    <div class="flex justify-center mt-2 space-x-2 py-3">
        <button type="button"
                id="prev-slide"
                class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            <arrow-narrow-left-icon class="h-5 w-5"/>
        </button>
        <button type="button"
                id="next-slide"
                class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            <arrow-narrow-right-icon class="h-5 w-5"/>
        </button>
    </div>
</swiper>

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