javascript - 将 ParticlesJs 集成到视图组件中

Question

我想将 ParticlesJs 集成到我的登录页面中。所以只有我的主视图应该使用这个粒子配置和渲染粒子。

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

https://codesandbox.io/s/ol2rnrlxxq

出现两个问题：

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

最终结果应该是这样的。

我将flat属性添加到卡中，因此修复这两个问题应该可以使其正常工作。

标签： javascriptvue.jsvuetify.jsparticles.js

Answer 1

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

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

制作particles-js全屏：

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

使您的布局中心（来自布局网格系统示例）：

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

码沙盒.io