javascript - 如何防止 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, 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 ...
}
},
也许有人有同样的问题?谢谢你的任何回答。
解决方案
我决定通过添加新道具(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);
推荐阅读
- azure - Azure Pipeline 运行量角器测试 - chrome 版本不匹配
- c++ - 遍历 CUDA 中的数组时跳过每个 M 元素
- .htaccess - Codeigniter + Lumen Framework - htaccess 将特定路径重定向到特定文件夹
- parse-platform - Parse.com 实时查询没有结果
- ios - 添加代码以捕捉 UISlider
- react-native - React Native - Expo 通知调度
- python - Python,scipy:Voronoi Tesselation 生成中的关键错误
- java - 改造 - 无法创建 calladapter
- java - 不支持的媒体类型 swagger-ui 同时提交 json 和 multipart
- bash - Sed 在文本出现之后打印方括号中的项目