材料设计 nuxt 集成答案

【问题标题】：Material design nuxt integration材料设计 nuxt 集成
【发布时间】：2019-09-20 18:45:14
【问题描述】：

我是 Nuxt 框架的新手，我想将材料设计库集成到我的项目中（官方：https://material.io/develop/web/）。

我用这个内容制作了一个插件：

import Vue from "vue"
import mdcAutoInit from "@material/auto-init"
import { MDCTextField } from "@material/textfield"
import { MDCTextFieldIcon } from "@material/textfield/icon"
import { MDCSelect } from "@material/select"
import { MDCFormField } from "@material/form-field"
import { MDCRadio } from "@material/radio"

function init() {
  /** Select */
  mdcAutoInit.register("select", MDCSelect)

  /** TextField */
  mdcAutoInit.register("textfield", MDCTextField)
  mdcAutoInit.register("textfieldIcon", MDCTextFieldIcon)

  /** Radio */
  mdcAutoInit.register("formfield", MDCFormField)
  mdcAutoInit.register("radio", MDCRadio)

  // /** Auto Init */
  mdcAutoInit.apply()
}

const plugin = {
  install(vm) {
    console.log("Installing")

    vm.component(MDCTextFieldIcon)
    vm.component(MDCTextField)
    vm.component(MDCSelect)
    vm.component(MDCFormField)
    vm.component(MDCRadio)

    init()
  }
}

if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(plugin)
} else {
  Vue.use(plugin)
}

我已经在 nuxt.config.js 的插件部分添加了它。

当我加载页面时它似乎可以工作（例如，文本字段动画正在工作）但是当我使用 nuxt-link 更改页面时，文本字段未初始化。

有谁知道如何让 Material Design 为每个加载的组件加载 init 函数？

提前致谢！

【问题讨论】：

that 有一个 npm 包。
感谢您的回答，但我想使用包含所有新材料设计元素的官方库（例如：textflieds）
您尝试使用的组件，例如@material/select 不是 vue 组件，所以你的 vue.component 应该是一个 vue 组件而不是一些随机的东西。 PS 也完全不需要你在最后检查窗口，应该只是 Vue.use(plugin)。 PSS 我建议使用 vuetify

标签： vue.js nuxt.js material-components-web

【解决方案1】：

我可以看到您正在使用mdcAutoInit。请参阅有关此实用程序的Material Design documentation。特别注意提到多次运行和新的 DOM 元素。

为什么？因为您使用的是 Nuxt，因此很可能构建一个 SPA，这意味着您的网站不是静态的。为什么网站不是静态的？因为 auto-init 将普通的、非反应式的事件侦听器附加到现有的 DOM 元素。当 Vue 通过重新渲染替换那些 DOM 元素时会发生什么（例如 v-if 条件更改）？现有的 DOM 元素及其附加的事件侦听器已被销毁，并且任何新的 DOM 元素尚未通过 auto-init 初始化。为什么不？因为 vanilla 材料设计库是非反应式的，所以 Vue 不知道该怎么处理它，并且 auto-init 假设它只会运行一次。

您似乎需要在每个包含材料设计组件的自定义组件中的 updated() 和 mounted() 挂钩中运行 window.mdc.autoInit(/* root */ document, () => {});，以确保根据需要附加适当的事件侦听器（请记住，这可能是一个相当昂贵的操作，具体取决于运行时的总 DOM 大小）。

或者，如果您想完全避免头痛，请使用现有的材料设计框架或组件库，并使用您的插件简单地导出您想要的组件。您可以在 awesome-vue GitHub 存储库中找到这些框架和插件的列表。

【讨论】：