Question

我在自定义媒体播放器组件中使用BootstrapVue范围滑块，代表媒体的播放位置。滑块是绑定到playbackPosition的v模型，当媒体播放时，事件侦听器会对其进行增量更新，从而使滑块手柄可预测地蠕动。（该事件由第三方库发出。）

当我手动调整范围滑块时，它会设置playbackPosition，并且只要媒体尚未播放，一切都可以正常工作。

如果已经在播放，则增量事件会不断更新playbackPosition，这会迫使我的范围滑块手柄移到我不希望的位置，然后才有机会释放手柄。而且，当然，我不能用输入侦听器替换变更侦听器，因为增量更新被识别为输入，这会导致播放混乱。

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

Answer 1

应该完全由您的第三方库控制滑块的位置吗？拖动滑块时，告诉库更新其在轨道中的位置，但不要手动更新滑块位置，这又将导致库发出一个新的位置事件，该事件将使您的滑块位置变大。

但是，如果位置更改后没有立即（相对）发出位置事件，则滑块可能会滞后于要拖动的位置。在这种情况下，您可以维护一个数据属性，该数据属性保留第三方库中的位置，而第二个数据属性，保留用户将滑块拖动到的位置，并使用计算属性来控制滑块的实际位置。像这样：

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

现在，当您开始手动移动滑块时，请为userPosition设置一个值，然后sliderPosition将与新位置而不是当前轨道位置匹配。当您完成移动滑块并指示第三方库更改音轨位置后，请将userPosition设置为null，然后sliderPosition将返回到与您给定的位置匹配的位置第三方图书馆。

Vue范围滑块手动更改被增量更改事件覆盖了吗？

1 个答案: