Vue 로그 인 페이지 의 동적 입자 배경 플러그 인 구현

동적 입자 효 과 는 다음 과 같 습 니 다:

플러그 인 설치

npm install vue-particles --save-dev

main.js 파일 에 전역 도입

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

vue 파일 에서 사용

 <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
</vue-particles>

동적 입 자 를 배경 그림 으로 사용 합 니 다.새로운 div 가 나타 나 야 할 때 div 는 vue-particles 내용 을 덮어 쓰 지 못 하고 순서대로 뒤로 표 시 됩 니 다.따라서position:absolute을 넣 었 고 새 div 상자 가 있 을 때position:relative로 설정 되 었 습 니 다.

<style>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
</style>

이상 속성 에 대한 소개:
vue-particles 의 속성:
color:String 타 입.기본'\#dededede'입 니 다.입자 색.
particleOpacity:Number 형식 입 니 다.묵인 0.7.입자 투명도.
particles Number:Number 형식 입 니 다.묵인입자 수.
shapeType:String 형식.기본'circle'입 니 다.사용 가능 한 입자 외관 유형 은"circle","edge","triangle","polygon","star"입 니 다.
particleSize:Number 형식.묵인단일 입자 크기.
linesColor:String 타 입.기본'\#dededede'입 니 다.라인 컬러.
linesWidth:Number 형식 입 니 다.묵인선 너비.
lineLinked:불 형식.기본 트 루.연결 선 을 사용 할 수 있 습 니까?
lineOpacity:Number 형식 입 니 다.묵인선 투명도.
linesDistance:Number 유형.묵인선 거리.
moveSpeed:Number 타 입.묵인입자 운동 속도.
hoverEffect:불 유형.기본 트 루.호 버 필터 가 있 습 니까?
hoverMode:String 타 입.기본 트 루.사용 가능 한 hover 모드 는"grab","repulse","bubble"입 니 다.
clickEffect:불 유형.기본 트 루.클릭 필터 가 있 는 지 여부 입 니 다.
clickMode:String 형식 입 니 다.기본 트 루.사용 가능 한 click 모드 는"push","remove","repulse","bubble"입 니 다.
Vue 로그 인 페이지 의 동적 입자 배경 플러그 인 구현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue 동적 입자 배경 에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!