Веб-компоненты материалов — автономная инициализация

Я пытаюсь включить только те компоненты, которые мне нужны, из 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>

Это отображает ошибку консоли «Uncaught TypeError: невозможно прочитать свойство autoInit неопределенного»

Я не уверен, что мне не хватает зависимости, и я не могу найти краткий источник для реализации автономного компонента.

Это проект WordPress. Я также использую веб-пакет.

Заранее благодарны за Вашу помощь.


webpack wordpress material-components material-components-web
person Kyl    schedule 10.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, это работает.

Добавьте '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.

// 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"
person Kyl    schedule 11.06.2018