angular - 进度条 - 用点击填充栏

Question

当我用鼠标拖动时，我有一个进度条。有没有办法通过点击来填充这个栏？

条形图从零开始，如果单击到 25，如果再次单击到 50，然后是 75，最后在第四次单击时达到 100。

有没有办法得到这个？

我的代码DEMO

html

<div class="progress aqua" [attr.data-width]="progress" (mousedown)="startUpdateSlider(data)"
    (mouseup)="endUpdateSlider(data)" (mouseleave)="endUpdateSlider(data)" (mousemove)="updateSlider($event,data)">
    <div class="progress-text">{{progress}}</div>
    <div class="progress-bar" [style.width]="progress">
        <div class="progress-text">{{progress}}</div>
    </div>
</div>

零件

 startUpdateSlider(data) {
    this.updateSliderToggle = true;
  }

  endUpdateSlider(data) {
    this.updateSliderToggle = false;
  }

  updateSlider(event, data) {
    if (this.updateSliderToggle) {

      let percentage: number = Math.floor(
        (event.layerX / (event.target.offsetWidth - 3)) * 100
      );

      if (percentage > 100) {
        percentage = 100;
      } else if (percentage < 0) {
        percentage = 0;
      }
      this.progress = percentage + '%';
    }
  }

在我的例子中，进度条可以填充从 0 到 100 的值。我希望这些值只是 0-25-75-100，并且每次点击都会增加 25。

标签： angulartypescript

Answer 1

只需(click)向您的 dom 添加一个事件。

工作 Stackblitz。