如何无动画立即设置Embla Carousel幻灯片索引

开发画廊组件时，点击图片打开包含embla-carousel的<dialog>弹窗，存在两个问题：

1. 无论点击哪张图片，弹窗轮播图始终从索引1开始展示
2. 使用emblaMainApi.scrollTo(selectedIdx.value)定位时会产生滚动动画，观感不佳

需求：选中的图片在轮播图中立即显示，无任何滚动动画。

方案1：调用scrollTo时禁用动画 #

Embla Carousel的scrollTo方法支持第二个配置参数，将animate设为false即可实现无动画跳转。需要确保在Embla实例初始化完成后调用该方法。

修改modal.vue的show方法：

defineExpose({
  show: async (index: number) => {
    selectedIdx.value = index;
    isOpen.value = true;
    dialog.value?.showModal();
    
    // 等待Embla实例初始化完成
    await nextTick();
    if (emblaMainApi.value) {
      // 无动画跳转到目标索引
      emblaMainApi.value.scrollTo(index, { animate: false });
    }
  },
});

方案2：初始化Embla时指定初始索引 #

如果弹窗打开时才初始化Embla，可以直接在初始化配置中设置initialScrollIndex为选中的索引，让轮播图一开始就显示目标幻灯片。

在modal.vue的Embla初始化逻辑中修改：

const emblaRef = ref(null);
const emblaMainApi = useEmblaCarousel(emblaRef, {
  // 初始索引绑定选中值
  initialScrollIndex: selectedIdx.value
});

// 配合show方法更新索引
defineExpose({
  show: (index: number) => {
    selectedIdx.value = index;
    isOpen.value = true;
    dialog.value?.showModal();
    
    // 如果Embla已初始化，重新初始化并应用新的初始索引
    if (emblaMainApi.value) {
      emblaMainApi.value.reInit({ initialScrollIndex: index });
    }
  },
});

方案3：利用Dialog的open事件触发定位 #

如果Embla在弹窗挂载时就已初始化，可以监听<dialog>的open事件，在弹窗完全打开后执行无动画跳转：

在modal.vue的模板中添加事件监听：

<dialog ref="dialog" @open="handleDialogOpen">
  <!-- Embla轮播图内容 -->
</dialog>

然后在脚本中实现处理函数：

const handleDialogOpen = () => {
  if (emblaMainApi.value && selectedIdx.value !== null) {
    emblaMainApi.value.scrollTo(selectedIdx.value, { animate: false });
  }
};

defineExpose({
  show: (index: number) => {
    selectedIdx.value = index;
    isOpen.value = true;
    dialog.value?.showModal();
  },
});

• 确保selectedIdx是响应式变量，且在调用Embla方法时已经正确赋值
• 如果弹窗是动态挂载的（比如用v-if控制显示），需要等待DOM挂载完成后再操作Embla实例（可通过nextTick实现）

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