vue量子背景 -＞ vue-particles

最新推荐文章于 2022-02-23 10:00:22 发布

原创最新推荐文章于 2022-02-23 10:00:22 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

css背景专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过npm安装vue-particles库，并在main.js中全局引入，以便在应用中使用。同时展示了如何在特定页面中配置vue-particles组件，设置粒子效果参数，以及与表单元素一起使用。还提到了样式调整可能涉及的定位和布局技巧。

下载依赖

npm install vue-particles --save-dev

main.js 中引入

improt Vue from 'Vue'
import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

好了，下面只需要只要引入ok

<vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>

总结：在main.js中引入，如果想引用到整个项目中就在app里引入放在前（他俩同级关系）
，若只想在登录页使用直接在登录页的vue中copy上面的配置代码段，同理和表单同级关系，被一个根标签包裹

<template>
	<div>
	  <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      	>
      </vue-particles>
      
      <表单元素../>
	</div>
</template>

样式会比较麻烦，定位、flex都可以