javascript - 将ParticlesJs集成到 View 组件中

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

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

https://codesandbox.io/s/ol2rnrlxxq

出现两个问题：


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


最终结果应如下所示。



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

最佳答案

您必须将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

关于javascript - 将ParticlesJs集成到 View 组件中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55874021/