如何防止 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 中的幻灯片更改(导航到另一张幻灯片)?的主要内容,如果未能解决你的问题,请参考以下文章