如何防止 vue-slick-carousel 中的幻灯片更改（导航到另一张幻灯片）？答案

【问题标题】：How to prevent slide change (navigating to another slide) in vue-slick-carousel?如何防止 vue-slick-carousel 中的幻灯片更改（导航到另一张幻灯片）？
【发布时间】：2021-05-05 12:02:27
【问题描述】：

我正在使用 vue-slick-carousel 加载给定幻灯片的时间表数据（在我的例子中是一个月）。

<vue-slick-carousel
  @afterChange="afterChange"
  @beforeChange="beforeChange"
  @swipe="swipe"
  class="text-center"
  :dots="true"
  :arrows="true"
  :initialSlide="getCurrentScheduleIndex"
  ref="mycarousel"
  v-if="this.schedules.length && !timeline_view"
>
  <template v-for="schedule in schedules">
    <div :key="schedule.id" class="schedule-slick-name">
      <em>{{ schedule.name }}</em>
    </div>
  </template>
</vue-slick-carousel>

如果用户在日程安排中进行了一些更改并意外点击更改幻灯片，我想警告用户未保存的更改并取消轮播导航。使用本机 slick.js，我只是调用 event.preventDefault()，如下所示：

$('.mySlick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    
    if (unsaved){
       event.preventDefault();
     ...

但我不知道如何在 vue 中做到这一点。如文档中所述，发出了 beforeChange 事件，但据我所知，只有 currentSlide 和 nextSlide 发出。

beforeChange(currentSlide, nextSlide) {
      if (this.unsavedChanges) {
        if (
          this.confirmLeave(
            "Are you sure you want to leave? Unsaved changes will be lost."
          )
        ) {
          // Prevent from navigating to another slide like event.preventDefault();
        }
      } else {
        // Proceed with slide change ...
      }
      
    },

我也尝试使用另一个类似的库 vue-slick，其中发出了原始 jQuery 事件，但调用 event.preventDefault() 不起作用：

beforeChange(event, slick, currentSlide, nextSlide) {
      if (this.unsavedChanges) {
        if (
          this.confirmLeave(
            "Are you sure you want to leave? Unsaved changes will be lost."
          )
        ) {
          // Prevent from navigatiing to another slide like event.preventDefault();
          event.preventDefault() // this does not work
        }
      } else {
        // Proceed with slide change ...
      }
      
    },

也许有人有同样的问题？感谢您的任何回答。

【问题讨论】：

您可以删除您的编辑并将其移至答案吗？
嗨，我将编辑移至答案

标签： javascript jquery vue.js vuejs2

【解决方案1】：

我决定通过添加新的道具（allowToSlideChange）来修改 vue-slick-carousel 库，它只是模拟“取消导航”行为：

如果用户不确认想要更改计划月份（更改轮播幻灯片），则发出 cancelNavigation 事件而不是 afterChange（我在其中调用所选月份的计划加载)。我知道这是那些丑陋的解决方案之一，但在我的情况下效果很好:)

slideHandler(index, dontAnimate = false) {
  let navigate = true;
  const { asNavFor, speed } = this;
  // capture currentslide before state is updated
  const currentSlide = this.currentSlide;
  if (!this.allowToSlideChange) {
    navigate = window.confirm(this.slideChangeWarningMsg);
    if (!navigate) {
      index = currentSlide; // If user cancel navigation just set the same slide as before
    }
  }
...
navigate
      ? this.$parent.$emit("afterChange", state.currentSlide)
      : this.$parent.$emit("navigationCanceled", state.currentSlide);

【讨论】：