javascript - 如何使用 Material Components Web Foundations

Question

使用 Material 组件，我试图找出如何使用组件基础的方法。

举个例子，我有

<div role="progressbar" class="mdc-linear-progress">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

在我的 JS 中有

const bar = $('.mdc-linear-progress')[0];

const MDCLinearProgress = mdc.linearProgress.MDCLinearProgress;
const MDCLinearProgressFoundation = mdc.linearProgress.MDCLinearProgressFoundation;

const progress = new MDCLinearProgress(bar);
const progressFoundation = new MDCLinearProgressFoundation(bar);

progressFoundation.setProgress(0.5);

如您所见，我的目标是尝试使用 MDCLinearProgressFoundation 类中的 setProgress 等方法。虽然这不起作用，但我不确定我做错了什么，因为它也没有给出任何错误。

Codepen - https://codepen.io/ErraticFox/pen/LdwYxb

Answer 1

查看文档，在 MDCLinearProgress 上，set progress 方法是一个属性 setter (这是一个在写入给定属性时调用的函数)。因此，它不会作为函数调用，而是像这样(其中 myDiv 是指向您在问题中创建的 div 树的指针):

var mlp = new mdc.linearProgress.MDCLinearProgress(myDiv);
mlp.progress = 0.5;

希望这对您有所帮助!