将ParticlesJs集成到视图组件中

Question

我想将ParticlesJs集成到我的登录页面中。因此，只有我的主视图才应使用此粒子配置并渲染粒子。

我创建了一个代码片段并添加了ParticlesJs依赖项

https://codesandbox.io/s/ol2rnrlxxq

出现两个问题：

• 我将ParticlesJs文件添加到沙箱中，但未定义函数particlesJS
• 我仍然希望将v-layout包装的内容放在屏幕中央。我该如何保存？我用v-content封装了视图，因为我认为必须在组件的顶层添加<div id="particles-js"></div>

最终结果应如下所示。

我在卡上添加了flat属性，因此，解决两个问题应该可以使其工作。

Answer 1

您必须将particlesJS初始化代码放在mounted钩子中，而不是created。因为在created挂钩中，尚未创建DOM元素。请查看有关mounted的更多信息。

export default {
  mounted () {
    particlesJS("particles-js", {
      ...
    })
  }
}

要使particles-js全屏显示：

#particles-js {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
}

要使布局中心（从Layout grid system example）：

<v-layout align-center justify-center row fill-height/>

codesandbox.io