javascript - 将 ParticlesJ 集成到 View 组件中

Question

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

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

https://codesandbox.io/s/ol2rnrlxxq

出现两个问题:

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

最终结果应该是这样的。

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

Answer 1

您必须将 articlesJS 初始化代码放在 mounted Hook 中，而不是 created 中。因为在 created 钩子(Hook)中，DOM 元素还没有创建。更多详情请查看mounted .

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

要使articles-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