如何在Vue agile中关闭拖动滑动

Question

我正在使用vue-agile，我必须在其中显示视频和图像。图像工作得很好，但对于视频，每当我拖动指针移动到播放器中的某个位置时，滑块就会拖动并移动到下一个滑块。有没有办法停止拖动/滑动功能?谢谢。

https://www.npmjs.com/package/vue-agile

Answer 1

作为解决方法，我首先观察点击元素上的鼠标事件(@mousedown， @mouseup)
在mousedown上，我将滑动距离道具设置为一个非常高的像素值，在下面的例子中我使用了1000,000,000(默认为50)。
Doc: https://github.com/lukaszflorczak/vue-agile
这对我的情况有效。

<template>
<agile :dots="false" :infinite="false" :center-mode="true" 
:nav-buttons="false" :swipe-distance="noSweep ? 1000000000 : 50" >
<div v-for="(card, index) in cards" :key="index">
<div 
@mousedown="noSweep=true"
@mouseup="noSweep=false"
>
Card content - example
</div>

</agile>
</template>
<script>
export default {
data() {
return {
noSweep: false,
cards:['A','B','C']
}
}
}
</script>