Question

我正在使用angular并在javascript的帮助下开发了一个可点击的进度条（这是我所能做到的最好的方法。）

是否可以将滑块放置在进度栏中，但又不影响进度可视化？

HTML

<div class="progress aqua" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>

<input class="slider" id="slider" type="range" name="slider" min="0" max="100" value="0">

组件

myfuction(){

$(document).ready(function( $ ) {


    $('#slider').on('input',function(e) {
        $('.progress-bar').css('width',(e.target  as HTMLInputElement).value + '%');
    });

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type == 'attributes' && mutation.attributeName == 'style') {
            var el   = (mutation.target as HTMLInputElement);
            var width  = el.style.width; 
            var $parentEl =$(el).parent('.progress');
            $parentEl.attr('data-width',width);
            $parentEl.find('.progress-text').text(width);
        }
      });
    });

    // configuration of the observer
    var config = {
        attributes: true,
        attributeFilter: ['style'],
        childList: false,
        characterData: false
    };

    $('.progress-bar').each(function(e) {
        // pass in the target node, as well as the observer options
        observer.observe(this, config);
    })
});
}

Image

目标是即使我使用滑块也可以增加点击的进度，但是如果可以删除滑块并使进度条的功能更好，则可以实现。

Answer 1

只是不要使用HTMLInputElement，而是要听鼠标事件并自己计算百分比。

在您的 component.ts 中添加以下功能：


private updateSliderToggle:boolean = false;

startUpdateSlider() {
  this.updateSliderToggle = true;
}

endUpdateSlider() {
  this.updateSliderToggle = false;
}

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

    // Might happen, as we set the max to -3 to reach 100% easier.
    if (percentage > 100) {
      percentage = 100;
    } else if (percentage < 0) {
      percentage = 0;
    }

    console.log(event);
    console.log(event.layerX, event.target.offsetWidth);
    $('.progress-bar').css('width', percentage + '%');
  }
}

然后在您的 component.html 中将标记更改为

<div class="progress aqua" data-width="0%" (mousedown)="startUpdateSlider()" (mouseup)="endUpdateSlider()" (mouseleave)="endUpdateSlider()" (mousemove)="updateSlider($event)" >
  <div class="progress-text">0%</div>
  <div class="progress-bar">
    <div class="progress-text">0%</div>
  </div>
</div>

这里是working Stackblitz

Answer 2

我知道已经回答了这个问题，但是如果您要通过陪审员和变异观察者来操作DOM，为什么要使用angular。 Angular可以从您那里提取此类信息。您将看到使用角度装订功能更容易的方法：

export class AppComponent {

  percentage: string = "0%"; // just expose a porperty

  private updateSliderToggle: boolean = false;

  startUpdateSlider() {
    this.updateSliderToggle = true;
  }

  endUpdateSlider() {
    this.updateSliderToggle = false;
  }

  updateSlider(event) {
    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.percentage = percentage + "%"; // and manipulate that property
    }
  }
}

在模板中进行必要的绑定：

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

Stackblitz

可点击的进度条

2 个答案: