vue 입자 필터 의 예제 코드

2696 단어 vue입자 효과
본 고 는 vue 입자 특수효과 의 예시 코드 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
구현 효과:

그래,네가 본 위의 그림 은 별자리 그림 과 유사 한 점 과 선 으로 vue-particles 에서 생 성 되 었 고 사용자 마우스 이벤트 와 상호작용 을 할 수 있다.
전송 문:vue-particles
사용 강좌

npm install vue-particles --save-dev
main.js 파일:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)
App.vue 파일-간단 한 예:

<template> 
  <div id="app">
   <vue-particles color="#dedede"></vue-particles>
  </div>
 </template>
App.vue 파일-완전한 예:

<template> 
  <div id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </div>
 </template>
속성:
  • 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 유형.묵인선 투명도.
  • lines 거리:Number 유형.묵인선 거리.
  • moveSpeed:Number 타 입.묵인입자 운동 속도.
  • hoverEffect:불 유형.기본 트 루.호 버 필터 가 있 습 니까?
  • hoverMode:String 타 입.기본 트 루.사용 가능 한 hover 모드 는"grab","repulse","bubble"입 니 다.
  • clickEffect:불 유형.기본 트 루.클릭 필터 가 있 는 지 여부 입 니 다.
  • clickMode:String 형식.기본 트 루.사용 가능 한 click 모드 는"push","remove","repulse","bubble"입 니 다.
    • 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    vue 2.0 개발 입문 노트 의 vue 파일 생 성 및 사용
    jQuery 간단 한 날짜 포맷 기능 예제 구현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage