2

我为 MDC 滑块（https://material.io/develop/web/components/sliders）创建了一个 DOM 元素。

它看起来不错（除了颜色）。它有效，但我真的不知道如何初始化它。

我从 CDN 导入 MDC。我无法从文档中了解如何进行初始化。这是一个有效的版本：

setTimeout(() => { slider = new mdc.slider.MDCSlider(eltSlider) });

没有setTimeout它是行不通的。

我尝试过使用 Promise 并稍等片刻。那是行不通的。

甚至可能更糟：如果我在 setTimeout 之后使用 Promise 等待，它就不再起作用了。

发生了什么事，我该怎么做？

我不使用 ts。而且我不使用任何包处理程序。只是普通的 JavaScript。（如果文档首先涵盖了这个用例，我会很高兴。）

（这里似乎只有一个关于 MDCSlider 的问题。它没有涵盖我的问题：实际使用基础和适配器类的 mdc-components）

编辑：“从 CDN 导入”是指此处提到的设置：https ://material.io/develop/web/docs/getting-started

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

没有 JavaScript 错误。只是屏幕上的滑块不起作用。（看起来没问题，但它不起作用。）

我认为这是 MDC 和 DOM 状态的问题。上面链接中的示例表明 DOM 已准备好，但它并没有这么说。并且它没有解释在使用 JavaScript 操作 DOM 时如何检查这一点。

4

2 回答 2

2

似乎latestunpkg 上的版本最近已更改8.0.0为9.0.0修复此问题

<script src="https://unpkg.com/material-components-web@9.0.0/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@9.0.0/dist/material-components-web.css" rel="stylesheet">

<div class="mdc-slider">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

<script>
        sldr = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
        sldr.root.addEventListener('MDCSlider:change', (e)=>console.log(e));
</script>

现在按预期工作https://stackblitz.com/edit/js-4ycwx5?file=index.html

于 2020-12-30T07:02:01.673 回答
1

这是一些关于在纯 JavaScript 中使用 MDC Web 的文档 - https://material.io/develop/web/docs/importing-js，“全球/CDN”部分。

  1. 确保在加载滑块 HTML 后调用 JavaScript。通常我将它插入到结束body标签之前。
  2. 以下是 JavaScript 滑块初始化代码的示例：
const MDCSlider = mdc.slider.MDCSlider;
const slider = new MDCSlider(document.querySelector('.mdc-slider'));

这是 MDCSlider 的最小工作示例 - https://jsfiddle.net/klyakh/oky0zf7e/1/

于 2020-11-30T17:55:48.647 回答