![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5COxMzM4UGM1IzYjFWM0EWOyYzX0ITNxEDM0AzLcZDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
上圖中的點和線,是由vue-particles生成的,不僅自己動,而且能與使用者滑鼠事件産生互動。
一、使用教程:
安裝
npm install vue-particles --save
在main.js裡加入以下代碼:
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
在使用的地方直接使用即可,如下:
<template>
<div id="app">
<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>
<router-view></router-view>
</div>
</template>
/*如果想做背景圖檔 可以給标簽一個class 直接添加背景圖*/
二、屬性說明
- color: String類型。預設'#dedede'。粒子顔色。
- particleOpacity: Number類型。預設0.7。粒子透明度。
- particlesNumber: Number類型。預設80。粒子數量。
- shapeType: String類型。預設'circle'。可用的粒子外觀類型有:"circle","edge","triangle", "polygon","star"。
- particleSize: Number類型。預設80。單個粒子大小。
- linesColor: String類型。預設'#dedede'。線條顔色。
- linesWidth: Number類型。預設1。線條寬度。
- lineLinked: 布爾類型。預設true。連接配接線是否可用。
- lineOpacity: Number類型。預設0.4。線條透明度。
- linesDistance: Number類型。預設150。線條距離。
- moveSpeed: Number類型。預設3。粒子運動速度。
- hoverEffect: 布爾類型。預設true。是否有hover特效。
- hoverMode: String類型。預設true。可用的hover模式有: "grab", "repulse", "bubble"。
- clickEffect: 布爾類型。預設true。是否有click特效。
- clickMode: String類型。預設true。可用的click模式有: "push", "remove", "repulse", "bubble"。
三、問題解決
1、問題及出現原因:
(1)問題:
解決項目上線後發現360浏覽器及QQ浏覽器的相容模式下,頁面空白,浏覽器會報:
(2)出現原因:
vue項目用到了很多es6的文法,IE核心的浏覽器會無法解析
2、解決方法
(1)下載下傳 babel-polyfill 子產品
npm install babel-polyfill -s
(2)配置 polyfill,在根目錄下新增babel.config.js檔案
module.exports = {
presets: [
['@vue/app', {
useBuiltIns: 'entry'
}]
]
}
(3)入口檔案(main.js)
import '@babel/polyfill'
(4)重新打包項目,即可支援es6文法
——————————————————————分割線—————————————————————
如果上面仍然沒有解決,則是vue-particles本身的問題。
經過網上各處搜尋得知,node_modules依賴中下載下傳的vue-particles插件index.js檔案存在問題。
檔案目錄如下圖所示:
原vue-particles/index.js代碼如下:
import particles from ‘./vue-particles.vue‘
const VueParticles = {
install (Vue, options) {
Vue.component(‘vue-particles‘, particles)
}
}
export default VueParticles
IE不支援install(){}這種寫法,故修改如下:
import particles from ‘./vue-particles.vue‘
const VueParticles = {
install: function (Vue, options) {
Vue.component(‘vue-particles‘, particles)
}
}
export default VueParticles
最後,項目重新打包,問題就解決了。