Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0962d46

Browse files
package.json, props and table
1 parent 51c7a9d commit 0962d46

File tree

5 files changed

+160
-16
lines changed

5 files changed

+160
-16
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"build": "node build/build.js",
1111
"lint": "eslint --ext .js,.vue src"
1212
},
13+
"main": "src/vue-particles/index.js",
1314
"dependencies": {
1415
"vue": "^2.2.6"
1516
},

‎src/App.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,20 @@
1212
</div>
1313
<vue-particles
1414
color="#ffffff"
15+
:particleOpacity="0.7"
1516
linesColor="#ffffff"
1617
:particlesNumber="80"
1718
shapeType="circle"
1819
:particleSize="5"
1920
:linesWidth="2"
21+
:lineLinked="true"
22+
:lineOpacity="0.4"
23+
:linesDistance="150"
24+
:moveSpeed="3"
25+
:hoverEffect="true"
26+
hoverMode="grab"
27+
:clickEffect="true"
28+
clickMode="push"
2029
>
2130
</vue-particles>
2231

‎src/components/Main.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ Vue.use(VueParticles)
6464
<td data-th="Default">#dedede</td>
6565
<td data-th="Description">Particle color</td>
6666
</tr>
67+
<tr>
68+
<td data-th="Name">particleOpacity</td>
69+
<td data-th="Type">Number</td>
70+
<td data-th="Default">0.7</td>
71+
<td data-th="Description">Particle opacity</td>
72+
</tr>
6773
<tr>
6874
<td data-th="Name">particlesNumber</td>
6975
<td data-th="Type">Number</td>
@@ -103,6 +109,72 @@ Vue.use(VueParticles)
103109
Lines width
104110
</td>
105111
</tr>
112+
<tr>
113+
<td data-th="Name">lineLinked</td>
114+
<td data-th="Type">Boolean</td>
115+
<td data-th="Default">true</td>
116+
<td data-th="Description">
117+
Enable lines
118+
</td>
119+
</tr>
120+
<tr>
121+
<td data-th="Name">lineOpacity</td>
122+
<td data-th="Type">Number</td>
123+
<td data-th="Default">0.4</td>
124+
<td data-th="Description">
125+
Line opacity
126+
</td>
127+
</tr>
128+
<tr>
129+
<td data-th="Name">linesDistance</td>
130+
<td data-th="Type">Number</td>
131+
<td data-th="Default">150</td>
132+
<td data-th="Description">
133+
Lines distance
134+
</td>
135+
</tr>
136+
<tr>
137+
<td data-th="Name">moveSpeed</td>
138+
<td data-th="Type">Number</td>
139+
<td data-th="Default">3</td>
140+
<td data-th="Description">
141+
Particles speed
142+
</td>
143+
</tr>
144+
<tr>
145+
<td data-th="Name">hoverEffect</td>
146+
<td data-th="Type">Boolean</td>
147+
<td data-th="Default">true</td>
148+
<td data-th="Description">
149+
Enable hover effect
150+
</td>
151+
</tr>
152+
<tr>
153+
<td data-th="Name">hoverMode</td>
154+
<td data-th="Type">String</td>
155+
<td data-th="Default">grab</td>
156+
<td data-th="Description">
157+
Available hover modes:
158+
"grab", "repulse", "bubble"
159+
</td>
160+
</tr>
161+
<tr>
162+
<td data-th="Name">clickEffect</td>
163+
<td data-th="Type">Boolean</td>
164+
<td data-th="Default">true</td>
165+
<td data-th="Description">
166+
Enable click effect
167+
</td>
168+
</tr>
169+
<tr>
170+
<td data-th="Name">clickMode</td>
171+
<td data-th="Type">String</td>
172+
<td data-th="Default">push</td>
173+
<td data-th="Description">
174+
Available click modes:
175+
"push", "remove", "repulse", "bubble"
176+
</td>
177+
</tr>
106178
</table>
107179
</div>
108180

‎src/vue-particles/index.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/* eslint-disable */
2-
// import particles from 'particles.js'
32
import particles from './vue-particles.vue'
43

54
const VueParticles = {
65

76
install (Vue, options) {
87
Vue.component('vue-particles', particles)
98
}
10-
/* eslint-disable */
11-
}
129

13-
export default VueParticles
10+
}
11+
/* eslint-disable */
12+
export default VueParticles

‎src/vue-particles/vue-particles.vue

Lines changed: 75 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,20 @@
22
<div
33
id="particles-js"
44
:color="color"
5+
:particleOpacity="particleOpacity"
56
:linesColor="linesColor"
67
:particlesNumber="particlesNumber"
78
:shapeType="shapeType"
89
:particleSize="particleSize"
910
:linesWidth="linesWidth"
11+
:lineLinked="lineLinked"
12+
:lineOpacity="lineOpacity"
13+
:linesDistance="linesDistance"
14+
:moveSpeed="moveSpeed"
15+
:hoverEffect="hoverEffect"
16+
:hoverMode="hoverMode"
17+
:clickEffect="clickEffect"
18+
:clickMode="clickMode"
1019
></div>
1120
</template>
1221
<script>
@@ -19,13 +28,17 @@
1928
type: String,
2029
default: '#dedede'
2130
},
31+
particleOpacity: {
32+
type: Number,
33+
default: 0.7
34+
},
2235
particlesNumber: {
2336
type: Number,
2437
default: 80
2538
},
2639
shapeType: {
2740
type: String,
28-
default: "circle"
41+
default: 'circle'
2942
},
3043
particleSize: {
3144
type: Number,
@@ -38,28 +51,78 @@
3851
linesWidth: {
3952
type: Number,
4053
default: 1
54+
},
55+
lineLinked: {
56+
type: Boolean,
57+
default: true
58+
},
59+
lineOpacity: {
60+
type: Number,
61+
default: 0.4
62+
},
63+
linesDistance: {
64+
type: Number,
65+
default: 150
66+
},
67+
moveSpeed: {
68+
type: Number,
69+
default: 3
70+
},
71+
hoverEffect: {
72+
type: Boolean,
73+
default: true
74+
},
75+
hoverMode: {
76+
type: String,
77+
default: 'grab'
78+
},
79+
clickEffect: {
80+
type: Boolean,
81+
default: true
82+
},
83+
clickMode: {
84+
type: String,
85+
default: 'push'
4186
}
4287
},
4388
mounted () {
4489
this.$nextTick(() => {
4590
this.initParticleJS(
4691
this.color,
92+
this.particleOpacity,
4793
this.particlesNumber,
4894
this.shapeType,
4995
this.particleSize,
5096
this.linesColor,
51-
this.linesWidth
97+
this.linesWidth,
98+
this.lineLinked,
99+
this.lineOpacity,
100+
this.linesDistance,
101+
this.moveSpeed,
102+
this.hoverEffect,
103+
this.hoverMode,
104+
this.clickEffect,
105+
this.clickMode
52106
)
53107
})
54108
},
55109
methods: {
56110
initParticleJS (
57111
color,
112+
particleOpacity,
58113
particlesNumber,
59114
shapeType,
60115
particleSize,
61116
linesColor,
62-
linesWidth
117+
linesWidth,
118+
lineLinked,
119+
lineOpacity,
120+
linesDistance,
121+
moveSpeed,
122+
hoverEffect,
123+
hoverMode,
124+
clickEffect,
125+
clickMode
63126
) {
64127
particlesJS('particles-js', {
65128
"particles": {
@@ -85,7 +148,7 @@
85148
}
86149
},
87150
"opacity": {
88-
"value": 0.7,
151+
"value": particleOpacity,
89152
"random": false,
90153
"anim": {
91154
"enable": false,
@@ -105,15 +168,15 @@
105168
}
106169
},
107170
"line_linked": {
108-
"enable": true,
109-
"distance": 150,
171+
"enable": lineLinked,
172+
"distance": linesDistance,
110173
"color": linesColor,
111-
"opacity": 0.4,
174+
"opacity": lineOpacity,
112175
"width": linesWidth
113176
},
114177
"move": {
115178
"enable": true,
116-
"speed": 3,
179+
"speed": moveSpeed,
117180
"direction": "none",
118181
"random": false,
119182
"straight": false,
@@ -130,12 +193,12 @@
130193
"detect_on": "canvas",
131194
"events": {
132195
"onhover": {
133-
"enable": true,
134-
"mode": "grab"
196+
"enable": hoverEffect,
197+
"mode": hoverMode
135198
},
136199
"onclick": {
137-
"enable": true,
138-
"mode": "push"
200+
"enable": clickEffect,
201+
"mode": clickMode
139202
},
140203
"onresize": {
141204

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /