0

我们从带有较旧 Ruby on Rails 3.2 应用程序的 MDC-Web 开始。

当包含整个 MDC-Web 包（CSS + JS）时，一切正常，但在尝试使用 MDC-Web 的单个包时会遇到问题。

当我们使用单个包时，我们得到一个错误“window.mdc.autoInit 不是函数”。

我们的代码：

<!DOCTYPE html>
<html>
<head>
<title>Log in</title>
<meta content='text/html; charset=UTF-8' http-equiv='content-type'>
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://unpkg.com/@material/textfield@0.35.0/dist/mdc.textfield.min.css">
<link rel="stylesheet" href="https://unpkg.com/@material/button@0.35.0/dist/mdc.button.min.css">

<script src="https://unpkg.com/@material/textfield@0.35.0/dist/mdc.textfield.min.js"></script>
<script src="https://unpkg.com/@material/ripple@0.35.0/dist/mdc.ripple.min.js"></script>
<script src="https://unpkg.com/@material/auto-init@0.35.0/dist/mdc.autoInit.min.js"></script>

<style>

:root {
  --mdc-theme-primary: #4F9593; /* this changes the color of all buttons */
  --mdc-theme-on-primary: #ffffff; /* this is the text color on the buttons */
  --mdc-theme-accent: #64dd17;
  --mdc-theme-secondary: #ffffff;
}


.mdc-button.primary-filled-button {
   --mdc-theme-primary: #fb641b;
}
</style>

<body>

<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">Email</label>
<div class="mdc-line-ripple"></div>
</div>

<button class= "mdc-button mdc-button--raised primary-filled-button" data-mdc-auto-init="MDCRipple" >
Log in
</button>

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

</body>
</html>

当我们使用完整的包（上面注释掉）时一切都很好，但是当我们只包含单个包时会失败，这会导致浏览器的 JS 控制台出现错误：

Uncaught TypeError: window.mdc.autoInit is not a function

当我们在控制台检查时 window.mdc.autoInit 确实存在：

> window.mdc.autoInit
{default: ƒ, __esModule: true}
default:ƒ r()
  __esModule:true
  __proto__:Object

但不是函数。

有谁知道我们做错了什么/我们如何解决这个问题？（我们希望使用单独的 MDC-web 包来避免与我们在站点的其余部分中使用的引导程序发生冲突，同时我们会一点一点地迁移。）

谢谢

4

1 回答 1

0

请从以下位置更改代码：

window.mdc.autoInit();

至

mdc.autoInit();
于 2018-10-03T23:20:32.017 回答