Question

我目前正在使用＆＃34;手动实例化＆＃34;方法，它很棒。我注意到了＃34;自动实例化＆＃34;方法，但不能让它工作。使用这种方法究竟需要什么？

当我使用代码时：

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

我收到错误记录：＆＃34;未捕获的ReferenceError：未定义mdc＆＃34;。

此处参考： https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

感谢。

Answer 1

Material Components Web Docs - Auto Init

mdc-auto-init是一个实用程序包，提供声明性，   基于DOM的MDC Web组件初始化的简单方法   网站。请注意，对于更高级的用例和复杂的网站，   组件的手动实例化将为您提供更大的灵活性。   但是，mdc-auto-init非常适合静态网站，原型和   其他最简单，最方便的用例。

当mdc-auto-init将组件附加到元素时，它将使用名称为data-mdc-auto-init的属性将该实例分配给元素。例如，给定

<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>

一旦调用mdc.autoInit()，就可以通过该元素上的MDCTextField属性访问组件实例。

Answer 2

我只需要简单地添加整个javascript文件MDC包即可。

<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>

只有mdc。定义并与auto-init一起使用。

MDC自动实例化

2 个答案: