普通纯html使用粒子效果只要导入相关的particles.js以及app.js的配置文件就好。
现在开始说两种vue使用粒子的方式,一个是纯js配置引入,另外一个是用vue-particles插件使用。
一、纯js的引入使用方式:
一般particles.js以及相关样式的配置文件都是放在项目目录src/assets/js中。我们在需要使用到的页面中使用import方式导入particles.js文件,然后把普通html的样式配置改为使用export default的方式导出,然后在使用的页面也同样使用import导入—这个改引入方式网上很多都没说,导致很多人不知道怎么引入配置文件。
然後就需要在mounted钩子方法中使用,以及在beforeDestroy中销毁,这个销毁也是网上很多都没有提到的。

 mounted() {
        // 初始化例子插件
        particlesJS("login", config);
      },
      beforeDestroy() {
        // 销毁 particlesJS
        // thanks https://github.com/d2-projects/d2-admin/issues/65
        // ref https://github.com/VincentGarreau/particles.js/issues/63
        if (pJSDom && pJSDom.length > 0) {
          pJSDom[0].pJS.fn.vendors.destroypJS();
          pJSDom = [];
        }
      },

在html的代码块中需要添加对应的 <div id="particles-js" ></div> 这里的id应该是配置文件中定义的,改为export方式没看到,但确实需要用到。另外如果要添加背景图片可以在css样式中 #particles-js 去设置。

二、使用vue-particles的实现方式:
在项目路径中去npm install vue-particles --save-dev,然后在main.js中去import 以及vue.use去加载使用,在html代码块中使用即可使用,这个是最简单的配置。https://github.com/creotip/vue-particles
http://vue-particles.netlify.com/

最后付上自己上传样式配置文件以及一个纯html的demo下载地址:https://download.csdn.net/download/u012138137/10941052 ----------原本是想把积分改为最低为1的,但是上传时发现改不了。。。

如果有问题还请指出,谢谢!!!

Logo

前往低代码交流专区

更多推荐