VueJS 项目中正确的 MaterializeCSS 初始化

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 Materialise Components 只有在手册页之后才能工作重新加载，当我打开一些组件并 return 到带有 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 项目中正确的 MaterializeCSS 初始化

Proper MaterializeCSS initialization in VueJS Project

materialize

vue.js