Vue.js Vue范围滑块手动更改是否被增量更改事件覆盖？

我在自定义媒体播放器组件中使用BootstrapVue范围滑块，表示媒体的播放位置。滑块是绑定到playbackPosition的v-model，在媒体播放时，事件侦听器会增量更新该位置，从而导致滑块控制柄可预测地缓慢移动。（事件由第三方库发出。）

当我手动调整范围滑块时，它会设置播放位置，只要媒体尚未播放，一切正常

如果它已经在播放，增量事件会不断更新播放位置，这会迫使我的范围滑块手柄在我有机会释放手柄之前移动到我不想要的地方。当然，我不能用输入侦听器替换更改侦听器，因为增量更新被识别为输入，这会导致播放失控

---

如何使范围滑块自行移动以反映播放位置，同时允许通过滑动手柄手动设置位置？

滑块的位置完全由第三方库控制是否可行？拖动滑块时，告诉库更新其在轨迹中的位置，但不要手动更新滑块位置，这将导致库发出一个新的位置事件，该事件将更新滑块位置

但是，如果位置更改后未立即（相对地）显示位置事件，则滑块可能会落后于您要拖动的位置。在这种情况下，您可以维护一个数据属性，该属性保存来自第三方库的位置，另一个数据属性保存用户将滑块拖动到的位置，并使用计算属性控制滑块的实际位置。大概是这样的：

data() {
  return {
    trackPosition: 0,
    userPosition: null,
  }
},
computed: {
  sliderPosition() {
    return this.userPosition !== null ? this.userPosition : this.trackPosition;
  }
}

---

现在，当您开始手动移动滑块时，为

userPosition

设置一个值，

sliderPosition

将匹配新位置，而不是当前轨迹位置。当您移动滑块并指示第三方库更改轨迹位置后，请将

userPosition

设置为

null

，此时

sliderPosition

将返回到与第三方库给出的位置相匹配的位置。

谢谢您的详细回答。我缺少的一个简单部分是如何指示何时“开始手动移动滑块”。当我需要使用v-on:mousedown时，我正在尝试使用v-on:click。巧合的是，在搜索mousedown w/Vue的详细信息时，我偶然发现了一个帖子，上面有一个。我很高兴你找到了答案，不用道歉。你的回答让我明白我做错了什么。再次感谢。