将 ParticlesJs 集成到视图组件中

Question

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

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

出现两个问题：

我将 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/>

Integrate ParticlesJs into a view component