Question

我尝试在用npm（vue init webpack projectname）创建的VueJS项目中初始化没有jQuery 的MaterializeCSS框架

从版本1.0.0-rc.2起，Materialize支持自己的初始化而无需jQuery，如下所示：

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

但是通过这种方式，JS Materialize Components仅在手册页之后才能工作重新加载，当我打开某些组件并使用Materialize材质返回到组件时-它不起作用-我需要一直重新手动重新加载页面。

那么如何以适当的方式初始化JS组件呢？

Answer 1

它对我有用，所以您可能想尝试一下：

转到您的src/main.js文件并添加以下几行（如果假定您正在使用npm）：

import 'materialize-css/dist/js/materialize.min'

我个人使用M.AutoInit()方式在需要它们的每个vue组件上初始化JS组件：

<template>
  <div class="componentName">
    <!-- Some HTML content -->
  </div>
</template>


<script>
  export default {
    name: 'componentName',

    data() {
      return {
        // Some values
      };
    },

    mounted() {
      M.AutoInit(); // That way, it is only initialized when the component is mounted
    }
  }
</script>


<style scoped>
  /* Some CSS */
</style>

使用M.AutoInit()或

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

在组件的mounted函数内部，将导致它们仅在完全安装时才被调用。

在VueJS Project中正确的MaterializeCSS初始化

1 个答案: