vue.js - Vue 范围 slider 手动更改被增量更改事件覆盖？

Question

我在自定义媒体播放器组件中使用 BootstrapVue 范围 slider ，代表媒体的播放位置。 slider 是绑定(bind)到 playbackPosition 的 v-model，它在媒体播放时由事件监听器增量更新，导致 slider handle 可预测地移动。 (该事件由第 3 方库发出。)

当我手动调整范围 slider 时，它设置了 playbackPosition，并且一切正常 - 只要媒体尚未播放。

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

如何让范围 slider 自行移动以反射(reflect)播放位置，同时允许通过滑动 handle 手动设置位置？

Answer 1

slider 的位置应该完全由您的第三方库控制是否可行？当您拖动 slider 时，告诉库更新其在轨道中的位置但不要手动更新 slider 位置，这将反过来导致库发出一个新的位置事件，然后您的 slider 位置。

但是，如果位置事件没有在位置更改后(相对)立即发出，则 slider 可能会滞后于您要拖动到的位置。在这种情况下，您可以维护一个数据属性，它保存来自您的第 3 方库的位置，以及第二个数据属性，它保存用户将 slider 拖动到的位置，并使用计算属性来控制 slider 的实际位置。像这样:

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

现在，当您开始手动移动 slider 时，为 userPosition 设置一个值，sliderPosition 将匹配新位置而不是当前轨道位置。当您完成移动 slider 并可能指示第三方库更改轨道位置时，将 userPosition 设置为 null，sliderPosition 现在将返回匹配第三方图书馆给出的位置。