Question

我正在尝试计算用户单击进度栏容器的百分比。即：如果他们在中间单击，则应该超过“ 50％”。但是随着进度栏的更改，我得到的结果不正确。

<template>
  <span class="progress"
        :style="{ width }"
        @click.prevent="onClickProgress($event)">
    <span class="elapsed" :style="{ width: completed }" ref="elapsed"></span>
    <span class="remainder" :style="{ width: remainder }"></span>
  </span>
</template>
<script>
export default {
  name: 'progress-bar',
  props: ['percent', 'width'],
  computed: {
    completed() {
      return `${this.percent}%`;
    },
    remainder() {
      return `${100 - this.percent}%`;
    },
  },
  methods: {
    onClickProgress($event) {
      // calculate where on progress bar click happened
      const width = $event.currentTarget.clientWidth;
      const elapsedWidth = this.$refs.elapsed.clientWidth;
      const offsetX =  elapsedWidth <  width ? elapsedWidth + $event.offsetX : $event.offsetX;
      const percent = Math.round((offsetX / width) * 100);


      this.$emit('onClickProgress', { percent });
    },
  },
};
</script>
<style lang="scss" scoped>
.progress {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 1rem;
  cursor: pointer;

  .elapsed {
    display: inline-block;
    height: .5rem;
    background: #E41C69;
  }

  .remainder {
    display: inline-block;
    height: .5rem;
    background: #000;
  }
}
</style>

它与单击的元素有关，因为我有两个子元素要经过和剩余，我认为鼠标事件为我提供了该元素的坐标，而不是我想要的.progress栏。 / p>

    onClickProgress($event) {
      // calculate where on progress bar click happened
      const width = $event.currentTarget.clientWidth;
      const elapsedWidth = this.$refs.elapsed.clientWidth;
      const offsetX =  elapsedWidth <  width ? elapsedWidth + $event.offsetX : $event.offsetX;
      const percent = Math.round((offsetX / width) * 100);

      this.$emit('onClickProgress', { percent });
    },

版本1：https://codesandbox.io/s/op7prxq6z
版本2：https://codesandbox.io/s/8265mqnr50

Answer 1

这很棘手。

我认为问题在于$ event.offsetX基于点击的目标，它可能是经过的或剩余的部分，因此您必须根据target和currentTarget的相对偏移来计算偏移：

  const offsetX = $event.offsetX + $event.target.offsetLeft - $event.currentTarget.offsetLeft;

这会为您提供父级中点击的偏移量，从而使您的百分比计算正确。

我的更新（尽管有些混乱）沙箱：https://codesandbox.io/s/llnmj5x7lz

如何计算进度条X轴鼠标单击的位置？

1 个答案: