1

我试图仅包含 Material Components Web 中我需要的组件，但我无法让组件初始化。目标是让所有相同类型的组件在加载时初始化，所以我认为自动初始化将是可行的方法。

import mdcAutoInit from '@material/auto-init';
import {MDCTextField} from '@material/textfield';

mdcAutoInit.register('MDCTextField', MDCTextField);
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
  <input class="mdc-text-field__input" type="text" id="input">
  <label for="input" class="mdc-floating-label">Input Label</label>
  <div class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
<script type="text/javascript">
  window.mdc.autoInit();
</script>

这会导致控制台错误“未捕获的类型错误：无法读取未定义的属性‘autoInit’”

我不确定我是否缺少依赖项，也找不到独立组件实现的简明来源。

这是一个 WordPress 项目。我也在使用 webpack。

提前感谢您的帮助。

4

1 回答 1

1

这似乎有效。

添加'window.mdcAutoInit = mdcAutoInit;' 导入 mdcAutoInit 后。

import mdcAutoInit from '@material/auto-init';
window.mdcAutoInit = mdcAutoInit;

然后将结束标记之前的初始化脚本替换为：

<script>window.mdcAutoInit();</script>

结果：

import mdcAutoInit from '@material/auto-init';
window.mdcAutoInit = mdcAutoInit;

import {MDCTextField} from '@material/textfield';
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
</div>

// add the bottom of the page
<script>
    window.mdcAutoInit();
</script>

确保您已删除 Material Components Web 文档建议的初始化脚本

// remove this
<script type="text/javascript">
  window.mdc.autoInit();
</script>

总而言之，这个实现似乎适用于导入单个 Material 组件，而不是包含整个 material-components-web 包。

作为参考，我正在使用的版本：

"@material/auto-init": "^0.35.0",
"@material/textfield": "^0.36.0"
于 2018-06-11T06:24:24.123 回答