Material Design Lite CSS/JS 行为与 VUE.js 不一致

Question

我经常注意到，当我登陆一个页面时，一些视觉元素显示完全不正确，并且文本字段上的 JS 行为没有发生。当我随后刷新页面时，页面运行正常。请参阅下面的屏幕截图： .

这种情况通常发生在我单击链接到相关页面的超链接时，但如果我在地址栏中手动键入地址则不会。

我已经使用 npm (https://npm.runkit.com/material-design-lite) 安装了 MDL。

我是 webpack 的新手，所以我不确定我是否配置正确。这是我的 CSS/JS 文件的导入方式 https://pastebin.com/QxmNyjAg

<!DOCTYPE html>
<html>

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">


      <!-- Add to homescreen for Chrome on Android -->
      <meta name="mobile-web-app-capable" content="yes">
      <link rel="icon" sizes="192x192" href="./src/assets/images/android-desktop.png">

      <!-- Add to homescreen for Safari on iOS -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="Material Design Lite">
      <link rel="apple-touch-icon-precomposed" href="./src/assets/images/ios-desktop.png">

      <!-- Tile icon for Win8 (144x144 + tile color) -->
      <meta name="msapplication-TileImage" content="./src/assets/images/touch/ms-touch-icon-144x144-precomposed.png">
      <meta name="msapplication-TileColor" content="#3372DF">

      <link rel="shortcut icon" href="./src/assets/images/favicon.png">

      <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
      <!--
      <link rel="canonical" href="http://www.example.com/">
      -->

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <!-- <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css"> -->
      <link rel="stylesheet" href="node_modules/material-design-lite/material.css" />
      <link rel="stylesheet" href="node_modules/mdl-ext/lib/mdl-ext.min.css" />
      <link rel="stylesheet" href="./static/styles.css">

     <!--<script src="https://code.getmdl.io/1.3.0/material.min.js" /> -->
      <script type="text/javascript" src="node_modules/material-design-lite/material.min.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/mdl-ext/lib/mdl-ext.min.js" charset="utf-8"></script>

      <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">
      </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Answer 1

预感 dom 在 Vue 中使用 MDL 组件时需要更新。您可以在页面加载和 Vue 应用程序安装后尝试升级 dom。

componentHandler.upgradeElements(node)

另请参阅：

https://github.com/google/material-design-lite/issues/871

Material Design Lite CSS/JS 行为与 VUE.js 不一致

Inconsistent Material Design Lite CSS/JS behaviour with VUE.js

html

css

vue.js

material-design-lite