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

Posted

技术标签:

【中文标题】如何防止 vue-slick-carousel 中的幻灯片更改(导航到另一张幻灯片)?【英文标题】:How to prevent slide change (navigating to another slide) in 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 ...
      
      
    ,

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

【问题讨论】:

您可以删除您的编辑并将其移至答案吗? 嗨,我将编辑移至答案 【参考方案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);

【讨论】:

以上是关于如何防止 vue-slick-carousel 中的幻灯片更改(导航到另一张幻灯片)?的主要内容,如果未能解决你的问题,请参考以下文章

机器学习中的数据泄露是什么?构建模型中如何防止数据泄露?正确的方案是什么?如何使用pipeline防止数据泄露?

如何防止用户重复提交数据

jquery中如何防止冒泡事件

如何在 django 中防止 XSS 攻击

在winform当中提交数据,如何防止重复提交?

如何防止 textarea 内容溢出到填充中?