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

如何解决如何防止 vue-slick-carousel 中的幻灯片更改导航到另一张幻灯片？

我正在使用 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,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 ...
      }
      
    },

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

解决方法

我决定通过添加新的 prop (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);