ud v

Author: lindelof

package.json

@@ -1,6 +1,6 @@
 {
   "name": "particles-bg-vue",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Vue.js component for particles backgrounds",
   "author": "creotip@gmail.com",
   "license": "MIT",

src/App.vue

@@ -2,8 +2,7 @@
   <div id="app">
     <div>
       <div>hello world</div>
-      <!-- <particles-bg type="custom" :config="config" :bg="true" /> -->
-      <particles-bg type="tadpole" :bg="true" />
+      <particles-bg type="custom" :config="config" :canvas="canvasStyle" :bg="true" />
     </div>
   </div>
 </template>
@@ -19,7 +18,9 @@ export default {
   data() {
     return {
       config:{},
-      msg: "Welcome to Your Vue.js App"
+      canvasStyle:{
+        height:"199px"
+      }
     };
   },
   methods: {},

src/particles-bg/ParticlesBg.vue

@@ -1,8 +1,13 @@
 <template>
-  <component :is="particles" 
-  :globalCompositeOperation="globalCompositeOperation"
-  :num="getNum()" :bg="bg" :color="color" 
-  :config="config"></component>
+  <component
+    :is="particles"
+    :globalCompositeOperation="globalCompositeOperation"
+    :num="getNum()"
+    :bg="bg"
+    :color="color"
+    :canvas="canvas"
+    :config="config"
+  ></component>
 </template>
 
 <script>
@@ -44,6 +49,7 @@ export default {
     bg: Boolean,
     color: String,
     config: Object,
+    canvas: Object,
     globalCompositeOperation: String
   },
   data() {

src/particles-bg/particles/BallParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -20,6 +21,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     num: Number,
     color: String,

src/particles-bg/particles/CanvasComp.vue

@@ -12,6 +12,7 @@
 export default {
   name: "CanvasComp",
   props: {
+    canvas: Object,
     bg: Boolean,
     globalCompositeOperation: String
   },
@@ -64,6 +65,10 @@ export default {
         left: 0
       });
     }
+
+    if(this.canvas){
+      this.styleObject = Object.assign(this.styleObject, this.canvas);
+    }
   },
   mounted() {
     this.initCanvas();

src/particles-bg/particles/CircleParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -29,6 +30,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/CobwebParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -20,6 +21,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/ColorParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -29,6 +30,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     num: Number,
     config: {}

src/particles-bg/particles/CustomParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="getCompositeOperation()"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -29,6 +30,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     num: Number,
     color: String,

src/particles-bg/particles/FountainParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="xor"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -29,6 +30,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/LinesParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -20,6 +21,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/PolygonParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="xor"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -30,6 +31,8 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/SquareParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="lighter"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -28,6 +29,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/TadpoleParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="xor"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -28,6 +29,7 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,

src/particles-bg/particles/ThickParticles.vue

@@ -1,6 +1,7 @@
 <template>
   <canvas-comp
     :bg="bg"
+    :canvas="canvas"
     global-composite-operation="source-over"
     v-on:canvasInited="canvasInited"
     v-on:canvasResize="canvasResize"
@@ -20,14 +21,15 @@ export default {
     CanvasComp
   },
   props: {
+    canvas: Object,
     bg: Boolean,
     color: String,
     num: Number,
     config: {}
   },
   methods: {
     canvasInited(canvas) {
-      this.canvas = canvas;
+      this.canvasDom = canvas;
       this.createProton(canvas);
       RAFManager.add(this.renderProton);
       if (this.color) {
@@ -134,7 +136,7 @@ export default {
       return renderer;
     },
     renderProton() {
-      const canvas = this.canvas;
+      const canvas = this.canvasDom;
       this.proton.update();
       if (this.index % 200 === 0) {
         this.attraction.targetPosition.x = Math.random() * canvas.width;