├── .browserslistrc
├── babel.config.js
├── docs
    ├── favicon.ico
    ├── index.html
    ├── css
    │   ├── index.ac49a1f3.css
    │   └── chunk-vendors.82cdee67.css
    └── js
    │   ├── index.a9fd204d.js
    │   └── index.a9fd204d.js.map
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── examples
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── footer.vue
    │   ├── banner.vue
    │   └── usage.vue
    ├── main.js
    └── App.vue
├── .editorconfig
├── dist
    ├── vue-particle-line.css
    ├── demo.html
    ├── vue-particle-line.umd.min.js
    ├── vue-particle-line.common.js.map
    ├── vue-particle-line.umd.js.map
    ├── vue-particle-line.common.js
    ├── vue-particle-line.umd.js
    └── vue-particle-line.umd.min.js.map
├── common
    └── js
    │   └── utils.js
├── .gitignore
├── packages
    ├── vue-particle-line
    │   ├── index.js
    │   └── src
    │   │   ├── particle-line
    │   │       ├── color.js
    │   │       ├── dot.js
    │   │       └── index.js
    │   │   └── vue-particle-line.vue
    └── index.js
├── .eslintrc.js
├── vue.config.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hzzly/vue-particle-line/HEAD/docs/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hzzly/vue-particle-line/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hzzly/vue-particle-line/HEAD/examples/assets/logo.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/examples/components/footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer text-center">
 3 |     <p class="white">created by hzzly</p>
 4 |   </footer>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'foot'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/dist/vue-particle-line.css:
--------------------------------------------------------------------------------
1 | .vue-particle-line[data-v-06727b55]{position:relative;width:100%;height:100%}.vue-particle-line .slot-wraper[data-v-06727b55]{z-index:1}.vue-particle-line .canvas[data-v-06727b55]{position:absolute;top:0;left:0;width:100%;height:100%}


--------------------------------------------------------------------------------
/dist/demo.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <title>vue-particle-line demo</title>
3 | <script src="./vue-particle-line.umd.js"></script>
4 | <link rel="stylesheet" href="./vue-particle-line.css">
5 | 
6 | <script>
7 | console.log(vue-particle-line)
8 | </script>
9 | 


--------------------------------------------------------------------------------
/common/js/utils.js:
--------------------------------------------------------------------------------
 1 | export function debounce (func, delay) {
 2 |   let timer
 3 | 
 4 |   return function (...args) {
 5 |     if (timer) {
 6 |       clearTimeout(timer)
 7 |     }
 8 |     timer = setTimeout(() => {
 9 |       func.apply(this, args)
10 |     }, delay)
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw*
21 | 


--------------------------------------------------------------------------------
/packages/vue-particle-line/index.js:
--------------------------------------------------------------------------------
 1 | // 导入组件，组件必须声明 name
 2 | import vueParticleLine from './src/vue-particle-line.vue'
 3 | 
 4 | // 为组件提供 install 安装方法，供按需引入
 5 | vueParticleLine.install = function (Vue) {
 6 |   Vue.component(vueParticleLine.name, vueParticleLine)
 7 | }
 8 | 
 9 | // 默认导出组件
10 | export default vueParticleLine
11 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import 'normalize.css/normalize.css'
 2 | import 'prismjs/themes/prism.css'
 3 | import 'prismjs/themes/prism-okaidia.css'
 4 | 
 5 | import Vue from 'vue'
 6 | import App from './App.vue'
 7 | 
 8 | // 导入组件库
 9 | import vueParticleLine from 'packages/index'
10 | import 'vue-particle-line/dist/vue-particle-line.css'
11 | // 注册组件库
12 | Vue.use(vueParticleLine)
13 | 
14 | Vue.config.productionTip = false
15 | 
16 | new Vue({
17 |   render: h => h(App)
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/packages/vue-particle-line/src/particle-line/color.js:
--------------------------------------------------------------------------------
 1 | export default class Color {
 2 |   constructor (min) {
 3 |     this.min = min || 0
 4 |     this._init(this.min)
 5 |   }
 6 | 
 7 |   _init (min) {
 8 |     this.r = this.colorValue(min)
 9 |     this.g = this.colorValue(min)
10 |     this.b = this.colorValue(min)
11 |     this.style = this.createColorStyle(this.r, this.g, this.b)
12 |   }
13 | 
14 |   colorValue (min) {
15 |     return Math.floor(Math.random() * 255 + min)
16 |   }
17 | 
18 |   createColorStyle (r, g, b) {
19 |     return `rgba(${r}, ${g}, ${b}, .8)`
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/components/banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="banner">
 3 |     <h2>{{text}}</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'banner',
10 |   props: ['text']
11 | }
12 | </script>
13 | 
14 | <style lang="scss" scoped>
15 | .banner {
16 |   display: flex;
17 |   justify-content: center;
18 |   align-items: center;
19 |   color: #fff;
20 |   h2 {
21 |     font-size: 5em;
22 |     font-family: Teko, sans-serif;
23 |     background: linear-gradient(to right, #c62020, #2188e1);
24 |     background-clip: text;
25 |     -webkit-background-clip: text;
26 |     color: transparent;
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | // 导入组件
 2 | import vueParticleLine from './vue-particle-line'
 3 | 
 4 | // 存储组件列表
 5 | const components = [
 6 |   vueParticleLine
 7 | ]
 8 | 
 9 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
10 | const install = function (Vue) {
11 |   // 判断是否安装
12 |   if (install.installed) return
13 |   // 遍历注册全局组件
14 |   components.map(component => Vue.component(component.name, component))
15 | }
16 | 
17 | // 判断是否是直接引入文件
18 | if (typeof window !== 'undefined' && window.Vue) {
19 |   install(window.Vue)
20 | }
21 | 
22 | export default {
23 |   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
24 |   install,
25 |   // 以下是具体的组件列表
26 |   vueParticleLine
27 | }
28 | 


--------------------------------------------------------------------------------
/packages/vue-particle-line/src/particle-line/dot.js:
--------------------------------------------------------------------------------
 1 | import Color from './color'
 2 | 
 3 | export default class Dot {
 4 |   constructor (ctx, canvasWidth, canvasHeight, x, y) {
 5 |     this.ctx = ctx
 6 |     this.x = x || Math.random() * canvasWidth
 7 |     this.y = y || Math.random() * canvasHeight
 8 |     this._init()
 9 |   }
10 | 
11 |   _init () {
12 |     this.vx = -0.5 + Math.random()
13 |     this.vy = -0.5 + Math.random()
14 |     this.radius = Math.random() * 3
15 |     this.color = new Color()
16 |   }
17 | 
18 |   draw () {
19 |     this.ctx.beginPath()
20 |     this.ctx.fillStyle = this.color.style
21 |     this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
22 |     this.ctx.fill()
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | function resolve(dir) {
 4 |   return path.join(__dirname, dir)
 5 | }
 6 | 
 7 | module.exports = {
 8 |   // 修改 src 目录 为 examples 目录
 9 |   baseUrl: process.env.NODE_ENV === 'production'
10 |     ? '/vue-particle-line/'
11 |     : '/',
12 |   pages: {
13 |     index: {
14 |       entry: 'examples/main.js',
15 |       template: 'public/index.html',
16 |       filename: 'index.html'
17 |     }
18 |   },
19 |   chainWebpack: config => {
20 |     config.resolve.alias
21 |       .set('packages', resolve('packages'))
22 |       .set('common', resolve('common'))
23 |     config.module
24 |       .rule('js')
25 |       .include
26 |         .add('/packages')
27 |         .end()
28 |       .use('babel')
29 |         .loader('babel-loader')
30 |         .tap(options => {
31 |           // 修改它的选项...
32 |           return options
33 |         })
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>canvas-vue</title>
 9 |     <style>.attachment-full { position: absolute; top: 0; right: 0;}</style>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but canvas-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <a href="https://github.com/hzzly/vue-particle-line"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## vue-particle-line
 2 | 
 3 | ![NPM version](https://img.shields.io/npm/v/vue-particle-line.svg)
 4 | ![MIT Licence](https://img.shields.io/npm/l/vue-particle-line.svg)
 5 | 
 6 | ### How to use
 7 | ```
 8 | npm install vue-particle-line --save
 9 | ```
10 | 
11 | ### Main.js file
12 | ```javascript
13 | import Vue from 'vue'
14 | import vueParticleLine from 'vue-particle-line'
15 | import 'vue-particle-line/dist/vue-particle-line.css'
16 | Vue.use(vueParticleLine)
17 | ```
18 | 
19 | ### App.vue file - Simple example
20 | ```html
21 | <template>
22 |   <div id="app">
23 |     <vue-particle-line>
24 |       <router-view />
25 |     </vue-particle-line>
26 |   </div>
27 | </template>
28 | ```
29 | 
30 | ### Props
31 | 
32 | | Prop         | Type    | Default  | Description   |
33 | | -------      | -----   | :------: |  -----------  |
34 | | lineWidth    | Number  |  0.3     |  connect line width   |
35 | | dotsNumber   | Number  |  100     |  dot number   |
36 | | dotsDistance | Number  |  100     |  far as points to connect   |
37 | | hoverEffect  | Boolean |  true    |  mouse hover events   |
38 | 
39 | ### License
40 | 
41 | MIT
42 | 
43 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-particle-line/favicon.ico><title>canvas-vue</title><style>.attachment-full { position: absolute; top: 0; right: 0;}</style><link href=/vue-particle-line/css/chunk-vendors.82cdee67.css rel=preload as=style><link href=/vue-particle-line/css/index.ac49a1f3.css rel=preload as=style><link href=/vue-particle-line/js/chunk-vendors.e4881fb6.js rel=preload as=script><link href=/vue-particle-line/js/index.a9fd204d.js rel=preload as=script><link href=/vue-particle-line/css/chunk-vendors.82cdee67.css rel=stylesheet><link href=/vue-particle-line/css/index.ac49a1f3.css rel=stylesheet></head><body><noscript><strong>We're sorry but canvas-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><a href=https://github.com/hzzly/vue-particle-line><img width=149 height=149 src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims=1></a><script src=/vue-particle-line/js/chunk-vendors.e4881fb6.js></script><script src=/vue-particle-line/js/index.a9fd204d.js></script></body></html>


--------------------------------------------------------------------------------
/packages/vue-particle-line/src/vue-particle-line.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vue-particle-line">
 3 |     <div class="slot-wraper">
 4 |       <slot></slot>
 5 |     </div>
 6 |     <canvas id="canvas" class="canvas"></canvas>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import ParticleLine from './particle-line'
12 | // import { debounce } from 'common/js/utils'
13 | export default {
14 |   name: 'vue-particle-line',
15 |   props: {
16 |     lineWidth: {
17 |       type: Number,
18 |       default: 0.3
19 |     },
20 |     dotsNumber: {
21 |       type: Number,
22 |       default: 100
23 |     },
24 |     dotsDistance: {
25 |       type: Number,
26 |       default: 100
27 |     },
28 |     hoverEffect: {
29 |       type: Boolean,
30 |       default: true
31 |     }
32 |   },
33 |   mounted () {
34 |     /* eslint-disable no-new */
35 |     new ParticleLine('canvas', {
36 |       lineWidth: this.lineWidth,
37 |       dotsNumber: this.dotsNumber,
38 |       dotsDistance: this.dotsDistance,
39 |       hoverEffect: this.hoverEffect
40 |     })
41 |     // particleLine.init()
42 |     // window.onresize = debounce(() => particleLine.resize(), 500)
43 |   }
44 | }
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | .vue-particle-line {
49 |   position: relative;
50 |   width: 100%;
51 |   height: 100%;
52 |   .slot-wraper {
53 |     z-index: 1;
54 |   }
55 |   .canvas {
56 |     position: absolute;
57 |     top: 0;
58 |     left: 0;
59 |     width: 100%;
60 |     height: 100%;
61 |   }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-particle-line",
 3 |   "version": "0.1.4",
 4 |   "description": "基于 Vue 的线性粒子背景",
 5 |   "main": "dist/vue-particle-line.umd.min.js",
 6 |   "keywords": [
 7 |     "vue-particle-line",
 8 |     "particle-line",
 9 |     "particle",
10 |     "vue"
11 |   ],
12 |   "license": "MIT",
13 |   "private": false,
14 |   "scripts": {
15 |     "serve": "vue-cli-service serve",
16 |     "build": "vue-cli-service build --dest docs",
17 |     "build-lib": "vue-cli-service build --target lib --name vue-particle-line packages/index.js",
18 |     "lint": "vue-cli-service lint"
19 |   },
20 |   "dependencies": {
21 |     "vue": "^2.5.21"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.2.0",
25 |     "@vue/cli-plugin-eslint": "^3.2.0",
26 |     "@vue/cli-service": "^3.2.0",
27 |     "@vue/eslint-config-standard": "^4.0.0",
28 |     "babel-eslint": "^10.0.1",
29 |     "eslint": "^5.8.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "lint-staged": "^8.1.0",
32 |     "node-sass": "^4.11.0",
33 |     "normalize.css": "^8.0.1",
34 |     "prismjs": "^1.15.0",
35 |     "sass-loader": "^7.1.0",
36 |     "vue-particle-line": "^0.1.0",
37 |     "vue-template-compiler": "^2.5.21"
38 |   },
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "https://github.com/hzzly/vue-particle-line.git"
42 |   },
43 |   "lint-staged": {
44 |     "*.js": [
45 |       "vue-cli-service lint",
46 |       "git add"
47 |     ],
48 |     "*.vue": [
49 |       "vue-cli-service lint",
50 |       "git add"
51 |     ]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <vue-particle-line class="banner-wraper">
  4 |       <banner :text="title"/>
  5 |     </vue-particle-line>
  6 |     <usage />
  7 |     <foot />
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import banner from './components/banner'
 13 | import usage from './components/usage'
 14 | import foot from './components/footer'
 15 | export default {
 16 |   name: 'app',
 17 |   components: {
 18 |     banner,
 19 |     usage,
 20 |     foot
 21 |   },
 22 |   data () {
 23 |     return {
 24 |       title: 'vue-particle-line'
 25 |     }
 26 |   }
 27 | }
 28 | </script>
 29 | 
 30 | <style lang="scss">
 31 | // 首页风格参考[vue-particles](https://vue-particles.netlify.com/)
 32 | * {
 33 |   box-sizing: border-box;
 34 | }
 35 | html,
 36 | body,
 37 | #app {
 38 |   width: 100%;
 39 |   height: 100%;
 40 |   background: #282e35;
 41 | }
 42 | #app {
 43 |   // font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 44 |   //   "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
 45 |   //   "Microsoft YaHei", SimSun, sans-serif;
 46 |   font-family: Avenir,Helvetica,Arial,sans-serif;
 47 |   -webkit-font-smoothing: antialiased;
 48 |   -moz-osx-font-smoothing: grayscale;
 49 |   font-size: 14px;
 50 |   text-align: center;
 51 |   color: #fff;
 52 |   .banner-wraper {
 53 |     display: flex;
 54 |     justify-content: center;
 55 |     align-items: center;
 56 |     background: #283644;
 57 |   }
 58 | }
 59 | 
 60 | code[class*="language-"],
 61 | pre[class*="language-"],
 62 | pre,
 63 | code {
 64 |   font-family: Menlo, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
 65 |   @media (max-width: 767px) {
 66 |     font-size: 0.95em;
 67 |   }
 68 | }
 69 | pre.language-js,
 70 | pre.language-html {
 71 |   max-width: 650px;
 72 |   margin: 1rem auto !important;
 73 |   background: #292929;
 74 |   border-radius: 3px;
 75 |   box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);
 76 | }
 77 | .npm-code {
 78 |   background: #292929;
 79 |   border-radius: 3px;
 80 |   box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);
 81 | }
 82 | h1,
 83 | h2 {
 84 |   font-weight: normal;
 85 | }
 86 | ul {
 87 |   list-style-type: none;
 88 |   padding: 0;
 89 | }
 90 | li {
 91 |   display: inline-block;
 92 |   margin: 0 10px;
 93 | }
 94 | a {
 95 |   color: #42b983;
 96 | }
 97 | h3 {
 98 |   font-weight: 100;
 99 |   font-size: 2rem;
100 | }
101 | .white {
102 |   color: #ffffff;
103 | }
104 | .text-left {
105 |   text-align: left;
106 | }
107 | .text-center {
108 |   text-align: center;
109 | }
110 | .footer {
111 |   margin: 1rem 0;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/docs/css/index.ac49a1f3.css:
--------------------------------------------------------------------------------
1 | .banner[data-v-94729b58]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.banner h2[data-v-94729b58]{font-size:5em;font-family:Teko,sans-serif;background:-webkit-gradient(linear,left top,right top,from(#c62020),to(#2188e1));background:linear-gradient(90deg,#c62020,#2188e1);background-clip:text;-webkit-background-clip:text;color:transparent}.main-section[data-v-20511c3a]{max-width:650px;margin:auto;padding:0 1rem}.section-title[data-v-20511c3a]{margin:2rem 0 0 0}.main-title[data-v-20511c3a]{color:#fff;z-index:999}.main-title h2[data-v-20511c3a]{font-size:7rem;font-family:Teko,sans-serif;text-shadow:8px 8px #000;text-transform:uppercase;margin:0}@media (max-width:767px){.main-title h2[data-v-20511c3a]{font-size:3rem}}.rwd-table[data-v-20511c3a]{margin:1em 0;min-width:300px}.rwd-table tr[data-v-20511c3a]{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.rwd-table th[data-v-20511c3a]{display:none}.rwd-table td[data-v-20511c3a]{display:block}.rwd-table td[data-v-20511c3a]:first-child{padding-top:.5em}.rwd-table td[data-v-20511c3a]:last-child{padding-bottom:.5em}.rwd-table td[data-v-20511c3a]:before{content:attr(data-th) ": ";font-weight:700;width:6.5em;display:inline-block}@media (min-width:767px){.rwd-table td[data-v-20511c3a]:before{display:none}}.rwd-table td[data-v-20511c3a],.rwd-table th[data-v-20511c3a]{text-align:left}@media (min-width:767px){.rwd-table td[data-v-20511c3a],.rwd-table th[data-v-20511c3a]{display:table-cell;padding:.25em .5em}.rwd-table td[data-v-20511c3a]:first-child,.rwd-table th[data-v-20511c3a]:first-child{padding-left:0}.rwd-table td[data-v-20511c3a]:last-child,.rwd-table th[data-v-20511c3a]:last-child{padding-right:0}}.rwd-table[data-v-20511c3a]{width:100%;color:#fff;overflow:hidden;background:#292929;border-radius:3px;-webkit-box-shadow:2px 6px 17px rgba(0,0,0,.39);box-shadow:2px 6px 17px rgba(0,0,0,.39);padding:.5rem}.rwd-table tr[data-v-20511c3a]{border-color:#46637f}.rwd-table td[data-v-20511c3a],.rwd-table th[data-v-20511c3a]{margin:.5em 1em}@media (min-width:767px){.rwd-table td[data-v-20511c3a],.rwd-table th[data-v-20511c3a]{padding:1em!important}}.rwd-table td[data-v-20511c3a]:before,.rwd-table th[data-v-20511c3a]{color:#dd5}*{-webkit-box-sizing:border-box;box-sizing:border-box}#app,body,html{width:100%;height:100%;background:#282e35}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;text-align:center;color:#fff}#app .banner-wraper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#283644}code,code[class*=language-],pre,pre[class*=language-]{font-family:Menlo,Monaco,Andale Mono,Ubuntu Mono,monospace!important}@media (max-width:767px){code,code[class*=language-],pre,pre[class*=language-]{font-size:.95em}}pre.language-html,pre.language-js{max-width:650px;margin:1rem auto!important}.npm-code,pre.language-html,pre.language-js{background:#292929;border-radius:3px;-webkit-box-shadow:2px 6px 17px rgba(0,0,0,.39);box-shadow:2px 6px 17px rgba(0,0,0,.39)}h1,h2{font-weight:400}ul{list-style-type:none;padding:0}li{display:inline-block;margin:0 10px}a{color:#42b983}h3{font-weight:100;font-size:2rem}.white{color:#fff}.text-left{text-align:left}.text-center{text-align:center}.footer{margin:1rem 0}.vue-particle-line[data-v-06727b55]{position:relative;width:100%;height:100%}.vue-particle-line .slot-wraper[data-v-06727b55]{z-index:1}.vue-particle-line .canvas[data-v-06727b55]{position:absolute;top:0;left:0;width:100%;height:100%}


--------------------------------------------------------------------------------
/docs/css/chunk-vendors.82cdee67.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}.token.punctuation{color:#999}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.vue-particle-line[data-v-06c79e02]{position:relative;width:100%;height:100%}.vue-particle-line .slot-wraper[data-v-06c79e02]{height:100%;z-index:99}.vue-particle-line .canvas[data-v-06c79e02]{position:absolute;top:0;left:0;width:100%;height:100%}


--------------------------------------------------------------------------------
/packages/vue-particle-line/src/particle-line/index.js:
--------------------------------------------------------------------------------
  1 | import Color from './color'
  2 | import Dot from './dot'
  3 | 
  4 | const minWidth = 1200
  5 | const minHeight = 700
  6 | 
  7 | export default class ParticleLine {
  8 |   constructor (tagId, options) {
  9 |     this.tagId = tagId
 10 |     this.options = options
 11 |     this.init()
 12 |   }
 13 | 
 14 |   init () {
 15 |     const canvas = document.querySelector(this.tagId)
 16 |     const ctx = canvas.getContext('2d')
 17 |     canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
 18 |     canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
 19 |     ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3
 20 |     ctx.strokeStyle = (new Color(150)).style
 21 |     this.dots = {
 22 |       nb: (this.options && this.options.dotsNumber) || 100,
 23 |       distance: (this.options && this.options.dotsDistance) || 100,
 24 |       array: []
 25 |     }
 26 |     this.canvas = canvas
 27 |     this.ctx = ctx
 28 |     this.color = new Color()
 29 |     this.createDots(this.ctx, this.canvas.width, this.canvas.height)
 30 |     this.animateDots()
 31 |     this.hoverEffect()
 32 |   }
 33 | 
 34 |   hoverEffect () {
 35 |     if (this.options && this.options.hoverEffect) {
 36 |       this.canvas.addEventListener('mousemove', e => {
 37 |         if (this.dots.array.length > this.dots.nb) {
 38 |           this.dots.array.pop()
 39 |         }
 40 |         this.dots.array.push(new Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))
 41 |       })
 42 |     }
 43 |   }
 44 | 
 45 |   resize () {
 46 |     const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
 47 |     const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
 48 |     this.canvas.width = width
 49 |     this.canvas.height = height
 50 |     this.createDots(this.ctx, width, height)
 51 |   }
 52 | 
 53 |   mixComponents (comp1, weight1, comp2, weight2) {
 54 |     return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)
 55 |   }
 56 | 
 57 |   averageColorStyles (dot1, dot2) {
 58 |     const color1 = dot1.color
 59 |     const color2 = dot2.color
 60 |     const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)
 61 |     const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)
 62 |     const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)
 63 |     return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))
 64 |   }
 65 | 
 66 |   createDots (ctx, canvasWidth, canvasHeight) {
 67 |     this.dots.array = []
 68 |     for (let i = 0; i < this.dots.nb; i++) {
 69 |       this.dots.array.push(new Dot(ctx, canvasWidth, canvasHeight))
 70 |     }
 71 |   }
 72 | 
 73 |   moveDots () {
 74 |     for (let i = 0; i < this.dots.nb; i++) {
 75 |       const dot = this.dots.array[i]
 76 |       if (dot.y < 0 || dot.y > this.canvas.height) {
 77 |         dot.vx = dot.vx // eslint-disable-line
 78 |         dot.vy = -dot.vy
 79 |       } else if (dot.x < 0 || dot.x > this.canvas.width) {
 80 |         dot.vx = -dot.vx
 81 |         dot.vy = dot.vy // eslint-disable-line
 82 |       }
 83 |       dot.x += dot.vx
 84 |       dot.y += dot.vy
 85 |     }
 86 |   }
 87 | 
 88 |   connectDots () {
 89 |     for (let i = 0; i < this.dots.array.length; i++) {
 90 |       for (let j = 0; j < this.dots.array.length; j++) {
 91 |         const iDot = this.dots.array[i]
 92 |         const jDot = this.dots.array[j]
 93 |         if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {
 94 |           this.ctx.beginPath()
 95 |           this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)
 96 |           this.ctx.moveTo(iDot.x, iDot.y)
 97 |           this.ctx.lineTo(jDot.x, jDot.y)
 98 |           this.ctx.stroke()
 99 |           this.ctx.closePath()
100 |         }
101 |       }
102 |     }
103 |   }
104 | 
105 |   drawDots () {
106 |     for (let i = 0; i < this.dots.array.length; i++) {
107 |       const dot = this.dots.array[i]
108 |       dot.draw()
109 |     }
110 |   }
111 | 
112 |   animateDots () {
113 |     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
114 |     this.drawDots()
115 |     this.connectDots()
116 |     this.moveDots()
117 |     requestAnimationFrame(this.animateDots.bind(this))
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/examples/components/usage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main-section">
  3 |     <h3 class="section-title white">How to use</h3>
  4 |     <pre class="npm-code white">
  5 |               <code>
  6 | npm install vue-particle-line --save
  7 |               </code>
  8 |      </pre>
  9 | 
 10 |     <br>
 11 | 
 12 |     <div class="wrap-code text-left">
 13 |       <h4 class="white">Main.js file</h4>
 14 |       <pre class="language-js"><code>
 15 | import Vue from 'vue'
 16 | import vueParticleLine from 'vue-particle-line'
 17 | import 'vue-particle-line/dist/vue-particle-line.css'
 18 | Vue.use(vueParticleLine)
 19 |         </code></pre>
 20 |     </div>
 21 |     <br>
 22 |     <div class="wrap-code text-left">
 23 |       <h4 class="white">App.vue file - Simple example</h4>
 24 |       <pre class="language-html"><code>
 25 | {{appCode}}
 26 |         </code></pre>
 27 |     </div>
 28 |     <br>
 29 |     <div class="wrap-table">
 30 |       <h4 class="white text-left">Props</h4>
 31 |       <!-- <pre class="language-html">编写中</pre> -->
 32 |       <table class="rwd-table">
 33 | 
 34 |         <thead>
 35 |           <tr>
 36 |             <th>Prop</th>
 37 |             <th>Type</th>
 38 |             <th>Default</th>
 39 |             <th>Description</th>
 40 |           </tr>
 41 |         </thead>
 42 | 
 43 |         <tr>
 44 |           <td data-th="Prop">lineWidth</td>
 45 |           <td data-th="Type">String</td>
 46 |           <td data-th="Default">0.3</td>
 47 |           <td data-th="Description">Lines width</td>
 48 |         </tr>
 49 |         <tr>
 50 |           <td data-th="Name">dotsNumber</td>
 51 |           <td data-th="Type">Number</td>
 52 |           <td data-th="Default">100</td>
 53 |           <td data-th="Description">
 54 |             Dots Number
 55 |           </td>
 56 |         </tr>
 57 |         <tr>
 58 |           <td data-th="Name">dotsDistance</td>
 59 |           <td data-th="Type">Number</td>
 60 |           <td data-th="Default">100</td>
 61 |           <td data-th="Description">
 62 |             Far as points to connect
 63 |           </td>
 64 |         </tr>
 65 |         <tr>
 66 |           <td data-th="Name">hoverEffect</td>
 67 |           <td data-th="Type">Boolean</td>
 68 |           <td data-th="Default">true</td>
 69 |           <td data-th="Description">
 70 |             Mouse hover events
 71 |           </td>
 72 |         </tr>
 73 |       </table>
 74 |     </div>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | import Prism from 'prismjs'
 80 | const appCode = `<template>
 81 |   <div id="app">
 82 |     <vue-particle-line>
 83 |       <router-view />
 84 |     </vue-particle-line>
 85 |   </div>
 86 | </template>`
 87 | export default {
 88 |   name: 'usage',
 89 |   data () {
 90 |     return {
 91 |       appCode
 92 |     }
 93 |   },
 94 |   mounted () {
 95 |     Prism.highlightAll()
 96 |   }
 97 | }
 98 | </script>
 99 | 
100 | <style lang="scss" scoped>
101 | $breakpoint-alpha: 767px;
102 | .main-section {
103 |   max-width: 650px;
104 |   margin: auto;
105 |   padding: 0 1rem;
106 | }
107 | .section-title {
108 |   margin: 2rem 0 0 0;
109 | }
110 | .main-title {
111 |   color: #fff;
112 |   z-index: 999;
113 |   h2 {
114 |     font-size: 7rem;
115 |     font-family: "Teko", sans-serif;
116 |     text-shadow: 8px 8px #000000;
117 |     text-transform: uppercase;
118 |     margin: 0;
119 |     @media (max-width: $breakpoint-alpha) {
120 |       font-size: 3rem;
121 |     }
122 |   }
123 | }
124 | .rwd-table {
125 |   margin: 1em 0;
126 |   min-width: 300px;
127 |   tr {
128 |     border-top: 1px solid #ddd;
129 |     border-bottom: 1px solid #ddd;
130 |   }
131 |   th {
132 |     display: none;
133 |   }
134 |   td {
135 |     display: block;
136 |     &:first-child {
137 |       padding-top: .5em;
138 |     }
139 |     &:last-child {
140 |       padding-bottom: .5em;
141 |     }
142 |     &:before {
143 |       content: attr(data-th)": ";
144 |       font-weight: bold;
145 |       width: 6.5em;
146 |       display: inline-block;
147 |       @media (min-width: $breakpoint-alpha) {
148 |         display: none;
149 |       }
150 |     }
151 |   }
152 |   th, td {
153 |     text-align: left;
154 |     @media (min-width: $breakpoint-alpha) {
155 |       display: table-cell;
156 |       padding: .25em .5em;
157 | 
158 |       &:first-child {
159 |         padding-left: 0;
160 |       }
161 | 
162 |       &:last-child {
163 |         padding-right: 0;
164 |       }
165 |     }
166 |   }
167 | }
168 | 
169 | .rwd-table {
170 |   width: 100%;
171 |   color: #fff;
172 |   overflow: hidden;
173 |   background: #292929;
174 |   border-radius: 3px;
175 |   box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);
176 |   padding: .5rem;
177 |   tr {
178 |     border-color: lighten(#34495E, 10%);
179 |   }
180 |   th, td {
181 |     margin: .5em 1em;
182 |     @media (min-width: $breakpoint-alpha) {
183 |       padding: 1em !important;
184 |     }
185 |   }
186 |   th, td:before {
187 |     color: #dd5;
188 |   }
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/dist/vue-particle-line.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-particle-line"]=e():t["vue-particle-line"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function s(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,s),o.l=!0,o.exports}return s.m=t,s.c=e,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)s.d(i,o,function(e){return t[e]}.bind(null,o));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s="2b43")}({"2b43":function(t,e,s){"use strict";var i;(s.r(e),"undefined"!==typeof window)&&((i=window.document.currentScript)&&(i=i.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(s.p=i[1]));var o=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"vue-particle-line"},[s("div",{staticClass:"slot-wraper"},[t._t("default")],2),s("canvas",{staticClass:"canvas",attrs:{id:"canvas"}})])},n=[];class r{constructor(t){this.min=t||0,this._init(this.min)}_init(t){this.r=this.colorValue(t),this.g=this.colorValue(t),this.b=this.colorValue(t),this.style=this.createColorStyle(this.r,this.g,this.b)}colorValue(t){return Math.floor(255*Math.random()+t)}createColorStyle(t,e,s){return`rgba(${t}, ${e}, ${s}, .8)`}}class a{constructor(t,e,s,i,o){this.ctx=t,this.x=i||Math.random()*e,this.y=o||Math.random()*s,this._init()}_init(){this.vx=-.5+Math.random(),this.vy=-.5+Math.random(),this.radius=3*Math.random(),this.color=new r}draw(){this.ctx.beginPath(),this.ctx.fillStyle=this.color.style,this.ctx.arc(this.x,this.y,this.radius,0,2*Math.PI,!1),this.ctx.fill()}}const c=1200,h=700;class d{constructor(t,e){this.tagId=t,this.options=e,this.init()}init(){const t=document.querySelector(this.tagId),e=t.getContext("2d");t.width=document.body.clientWidth>c?document.body.clientWidth:c,t.height=document.body.clientHeight>h?document.body.clientHeight:h,e.lineWidth=this.options&&this.options.lineWidth||.3,e.strokeStyle=new r(150).style,this.dots={nb:this.options&&this.options.dotsNumber||100,distance:this.options&&this.options.dotsDistance||100,array:[]},this.canvas=t,this.ctx=e,this.color=new r,this.createDots(this.ctx,this.canvas.width,this.canvas.height),this.animateDots(),this.hoverEffect()}hoverEffect(){this.options&&this.options.hoverEffect&&this.canvas.addEventListener("mousemove",t=>{this.dots.array.length>this.dots.nb&&this.dots.array.pop(),this.dots.array.push(new a(this.ctx,this.canvas.width,this.canvas.height,t.pageX,t.pageY))})}resize(){const t=document.body.clientWidth>c?document.body.clientWidth:c,e=document.body.clientHeight>h?document.body.clientHeight:h;this.canvas.width=t,this.canvas.height=e,this.createDots(this.ctx,t,e)}mixComponents(t,e,s,i){return(t*e+s*i)/(e+i)}averageColorStyles(t,e){const s=t.color,i=e.color,o=this.mixComponents(s.r,t.radius,i.r,e.radius),n=this.mixComponents(s.g,t.radius,i.g,e.radius),r=this.mixComponents(s.b,t.radius,i.b,e.radius);return this.color.createColorStyle(Math.floor(o),Math.floor(n),Math.floor(r))}createDots(t,e,s){this.dots.array=[];for(let i=0;i<this.dots.nb;i++)this.dots.array.push(new a(t,e,s))}moveDots(){for(let t=0;t<this.dots.nb;t++){const e=this.dots.array[t];e.y<0||e.y>this.canvas.height?(e.vx=e.vx,e.vy=-e.vy):(e.x<0||e.x>this.canvas.width)&&(e.vx=-e.vx,e.vy=e.vy),e.x+=e.vx,e.y+=e.vy}}connectDots(){for(let t=0;t<this.dots.array.length;t++)for(let e=0;e<this.dots.array.length;e++){const s=this.dots.array[t],i=this.dots.array[e];s.x-i.x<this.dots.distance&&s.y-i.y<this.dots.distance&&s.x-i.x>-this.dots.distance&&s.y-i.y>-this.dots.distance&&(this.ctx.beginPath(),this.ctx.strokeStyle=this.averageColorStyles(s,i),this.ctx.moveTo(s.x,s.y),this.ctx.lineTo(i.x,i.y),this.ctx.stroke(),this.ctx.closePath())}}drawDots(){for(let t=0;t<this.dots.array.length;t++){const e=this.dots.array[t];e.draw()}}animateDots(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.drawDots(),this.connectDots(),this.moveDots(),requestAnimationFrame(this.animateDots.bind(this))}}var l={name:"vue-particle-line",props:{lineWidth:{type:Number,default:.3},dotsNumber:{type:Number,default:100},dotsDistance:{type:Number,default:100},hoverEffect:{type:Boolean,default:!0}},mounted(){new d("canvas",{lineWidth:this.lineWidth,dotsNumber:this.dotsNumber,dotsDistance:this.dotsDistance,hoverEffect:this.hoverEffect})}},u=l;s("7bb6");function f(t,e,s,i,o,n,r,a){var c,h="function"===typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=s,h._compiled=!0),i&&(h.functional=!0),n&&(h._scopeId="data-v-"+n),r?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},h._ssrRegister=c):o&&(c=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(h.functional){h._injectStyles=c;var d=h.render;h.render=function(t,e){return c.call(e),d(t,e)}}else{var l=h.beforeCreate;h.beforeCreate=l?[].concat(l,c):[c]}return{exports:t,options:h}}var y=f(u,o,n,!1,null,"06727b55",null);y.options.__file="vue-particle-line.vue";var v=y.exports;v.install=function(t){t.component(v.name,v)};var p=v;const m=[p],b=function(t){b.installed||m.map(e=>t.component(e.name,e))};"undefined"!==typeof window&&window.Vue&&b(window.Vue);var x={install:b,vueParticleLine:p};e["default"]=x},"7bb6":function(t,e,s){"use strict";var i=s("8787"),o=s.n(i);o.a},8787:function(t,e,s){}})});
2 | //# sourceMappingURL=vue-particle-line.umd.min.js.map


--------------------------------------------------------------------------------
/docs/js/index.a9fd204d.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var i,r,o=e[0],c=e[1],l=e[2],d=0,u=[];d<o.length;d++)r=o[d],a[r]&&u.push(a[r][0]),a[r]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=c[i]);h&&h(e);while(u.length)u.shift()();return n.push.apply(n,l||[]),s()}function s(){for(var t,e=0;e<n.length;e++){for(var s=n[e],i=!0,o=1;o<s.length;o++){var c=s[o];0!==a[c]&&(i=!1)}i&&(n.splice(e--,1),t=r(r.s=s[0]))}return t}var i={},a={index:0},n=[];function r(e){if(i[e])return i[e].exports;var s=i[e]={i:e,l:!1,exports:{}};return t[e].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=t,r.c=i,r.d=function(t,e,s){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(s,i,function(e){return t[e]}.bind(null,i));return s},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="/vue-particle-line/";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var l=0;l<o.length;l++)e(o[l]);var h=c;n.push([0,"chunk-vendors"]),s()})({0:function(t,e,s){t.exports=s("c31f")},"0959":function(t,e,s){},"4d1c":function(t,e,s){"use strict";var i=s("d9f7"),a=s.n(i);a.a},"7bb6":function(t,e,s){"use strict";var i=s("8787"),a=s.n(i);a.a},8505:function(t,e,s){"use strict";var i=s("0959"),a=s.n(i);a.a},8787:function(t,e,s){},"905c":function(t,e,s){"use strict";var i=s("b087"),a=s.n(i);a.a},b087:function(t,e,s){},c31f:function(t,e,s){"use strict";s.r(e);s("9f35"),s("b46d"),s("bf22");var i=s("3a00"),a=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"app"}},[s("vue-particle-line",{staticClass:"banner-wraper"},[s("banner",{attrs:{text:t.title}})],1),s("usage"),s("foot")],1)},n=[],r=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"banner"},[s("h2",[t._v(t._s(t.text))])])},o=[],c={name:"banner",props:["text"]},l=c,h=(s("905c"),s("048f")),d=Object(h["a"])(l,r,o,!1,null,"94729b58",null);d.options.__file="banner.vue";var u=d.exports,v=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"main-section"},[s("h3",{staticClass:"section-title white"},[t._v("How to use")]),t._m(0),s("br"),t._m(1),s("br"),s("div",{staticClass:"wrap-code text-left"},[s("h4",{staticClass:"white"},[t._v("App.vue file - Simple example")]),s("pre",{staticClass:"language-html"},[s("code",[t._v("\n"+t._s(t.appCode)+"\n        ")])])]),s("br"),t._m(2)])},p=[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("pre",{staticClass:"npm-code white"},[t._v("              "),s("code",[t._v("\nnpm install vue-particle-line --save\n              ")]),t._v("\n     ")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"wrap-code text-left"},[s("h4",{staticClass:"white"},[t._v("Main.js file")]),s("pre",{staticClass:"language-js"},[s("code",[t._v("\nimport Vue from 'vue'\nimport vueParticleLine from 'vue-particle-line'\nimport 'vue-particle-line/dist/vue-particle-line.css'\nVue.use(vueParticleLine)\n        ")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"wrap-table"},[s("h4",{staticClass:"white text-left"},[t._v("Props")]),s("table",{staticClass:"rwd-table"},[s("thead",[s("tr",[s("th",[t._v("Prop")]),s("th",[t._v("Type")]),s("th",[t._v("Default")]),s("th",[t._v("Description")])])]),s("tr",[s("td",{attrs:{"data-th":"Prop"}},[t._v("lineWidth")]),s("td",{attrs:{"data-th":"Type"}},[t._v("String")]),s("td",{attrs:{"data-th":"Default"}},[t._v("0.3")]),s("td",{attrs:{"data-th":"Description"}},[t._v("Lines width")])]),s("tr",[s("td",{attrs:{"data-th":"Name"}},[t._v("dotsNumber")]),s("td",{attrs:{"data-th":"Type"}},[t._v("Number")]),s("td",{attrs:{"data-th":"Default"}},[t._v("100")]),s("td",{attrs:{"data-th":"Description"}},[t._v("\n            Dots Number\n          ")])]),s("tr",[s("td",{attrs:{"data-th":"Name"}},[t._v("dotsDistance")]),s("td",{attrs:{"data-th":"Type"}},[t._v("Number")]),s("td",{attrs:{"data-th":"Default"}},[t._v("100")]),s("td",{attrs:{"data-th":"Description"}},[t._v("\n            Far as points to connect\n          ")])]),s("tr",[s("td",{attrs:{"data-th":"Name"}},[t._v("hoverEffect")]),s("td",{attrs:{"data-th":"Type"}},[t._v("Boolean")]),s("td",{attrs:{"data-th":"Default"}},[t._v("true")]),s("td",{attrs:{"data-th":"Description"}},[t._v("\n            Mouse hover events\n          ")])])])])}],f=s("566d"),m=s.n(f);const b='<template>\n  <div id="app">\n    <vue-particle-line>\n      <router-view />\n    </vue-particle-line>\n  </div>\n</template>';var y={name:"usage",data(){return{appCode:b}},mounted(){m.a.highlightAll()}},_=y,x=(s("8505"),Object(h["a"])(_,v,p,!1,null,"20511c3a",null));x.options.__file="usage.vue";var g=x.exports,w=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},C=[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("footer",{staticClass:"footer text-center"},[s("p",{staticClass:"white"},[t._v("created by hzzly")])])}],D={name:"foot"},E=D,M=Object(h["a"])(E,w,C,!1,null,null,null);M.options.__file="footer.vue";var P=M.exports,S={name:"app",components:{banner:u,usage:g,foot:P},data(){return{title:"vue-particle-line"}}},j=S,N=(s("4d1c"),Object(h["a"])(j,a,n,!1,null,null,null));N.options.__file="App.vue";var O=N.exports,$=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"vue-particle-line"},[s("div",{staticClass:"slot-wraper"},[t._t("default")],2),s("canvas",{staticClass:"canvas",attrs:{id:"canvas"}})])},T=[];class W{constructor(t){this.min=t||0,this._init(this.min)}_init(t){this.r=this.colorValue(t),this.g=this.colorValue(t),this.b=this.colorValue(t),this.style=this.createColorStyle(this.r,this.g,this.b)}colorValue(t){return Math.floor(255*Math.random()+t)}createColorStyle(t,e,s){return`rgba(${t}, ${e}, ${s}, .8)`}}class V{constructor(t,e,s,i,a){this.ctx=t,this.x=i||Math.random()*e,this.y=a||Math.random()*s,this._init()}_init(){this.vx=-.5+Math.random(),this.vy=-.5+Math.random(),this.radius=3*Math.random(),this.color=new W}draw(){this.ctx.beginPath(),this.ctx.fillStyle=this.color.style,this.ctx.arc(this.x,this.y,this.radius,0,2*Math.PI,!1),this.ctx.fill()}}const k=1200,H=700;class L{constructor(t,e){this.tagId=t,this.options=e,this.init()}init(){const t=document.querySelector(this.tagId),e=t.getContext("2d");t.width=document.body.clientWidth>k?document.body.clientWidth:k,t.height=document.body.clientHeight>H?document.body.clientHeight:H,e.lineWidth=this.options&&this.options.lineWidth||.3,e.strokeStyle=new W(150).style,this.dots={nb:this.options&&this.options.dotsNumber||100,distance:this.options&&this.options.dotsDistance||100,array:[]},this.canvas=t,this.ctx=e,this.color=new W,this.createDots(this.ctx,this.canvas.width,this.canvas.height),this.animateDots(),this.hoverEffect()}hoverEffect(){this.options&&this.options.hoverEffect&&this.canvas.addEventListener("mousemove",t=>{this.dots.array.length>this.dots.nb&&this.dots.array.pop(),this.dots.array.push(new V(this.ctx,this.canvas.width,this.canvas.height,t.pageX,t.pageY))})}resize(){const t=document.body.clientWidth>k?document.body.clientWidth:k,e=document.body.clientHeight>H?document.body.clientHeight:H;this.canvas.width=t,this.canvas.height=e,this.createDots(this.ctx,t,e)}mixComponents(t,e,s,i){return(t*e+s*i)/(e+i)}averageColorStyles(t,e){const s=t.color,i=e.color,a=this.mixComponents(s.r,t.radius,i.r,e.radius),n=this.mixComponents(s.g,t.radius,i.g,e.radius),r=this.mixComponents(s.b,t.radius,i.b,e.radius);return this.color.createColorStyle(Math.floor(a),Math.floor(n),Math.floor(r))}createDots(t,e,s){this.dots.array=[];for(let i=0;i<this.dots.nb;i++)this.dots.array.push(new V(t,e,s))}moveDots(){for(let t=0;t<this.dots.nb;t++){const e=this.dots.array[t];e.y<0||e.y>this.canvas.height?(e.vx=e.vx,e.vy=-e.vy):(e.x<0||e.x>this.canvas.width)&&(e.vx=-e.vx,e.vy=e.vy),e.x+=e.vx,e.y+=e.vy}}connectDots(){for(let t=0;t<this.dots.array.length;t++)for(let e=0;e<this.dots.array.length;e++){const s=this.dots.array[t],i=this.dots.array[e];s.x-i.x<this.dots.distance&&s.y-i.y<this.dots.distance&&s.x-i.x>-this.dots.distance&&s.y-i.y>-this.dots.distance&&(this.ctx.beginPath(),this.ctx.strokeStyle=this.averageColorStyles(s,i),this.ctx.moveTo(s.x,s.y),this.ctx.lineTo(i.x,i.y),this.ctx.stroke(),this.ctx.closePath())}}drawDots(){for(let t=0;t<this.dots.array.length;t++){const e=this.dots.array[t];e.draw()}}animateDots(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.drawDots(),this.connectDots(),this.moveDots(),requestAnimationFrame(this.animateDots.bind(this))}}var A={name:"vue-particle-line",props:{lineWidth:{type:Number,default:.3},dotsNumber:{type:Number,default:100},dotsDistance:{type:Number,default:100},hoverEffect:{type:Boolean,default:!0}},mounted(){new L("canvas",{lineWidth:this.lineWidth,dotsNumber:this.dotsNumber,dotsDistance:this.dotsDistance,hoverEffect:this.hoverEffect})}},z=A,I=(s("7bb6"),Object(h["a"])(z,$,T,!1,null,"06727b55",null));I.options.__file="vue-particle-line.vue";var q=I.exports;q.install=function(t){t.component(q.name,q)};var B=q;const F=[B],J=function(t){J.installed||F.map(e=>t.component(e.name,e))};"undefined"!==typeof window&&window.Vue&&J(window.Vue);var R={install:J,vueParticleLine:B};s("84bd");i["a"].use(R),i["a"].config.productionTip=!1,new i["a"]({render:t=>t(O)}).$mount("#app")},d9f7:function(t,e,s){}});
2 | //# sourceMappingURL=index.a9fd204d.js.map


--------------------------------------------------------------------------------
/dist/vue-particle-line.common.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://vue-particle-line/webpack/bootstrap","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?8c04","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/color.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/dot.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/index.js","webpack://vue-particle-line/packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?2169","webpack://vue-particle-line/./node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/index.js","webpack://vue-particle-line/./packages/index.js","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/entry-lib.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?66ac","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?e399"],"names":[],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;AClFA;;AAEA;AACA,MAAM,eAAC;AACP,OAAO,eAAC,sCAAsC,eAAC,GAAG,eAAC;AACnD,IAAI,qBAAuB,GAAG,eAAC;AAC/B;AACA;;AAEA;AACe,sDAAI;;;ACVnB,0BAA0B,aAAa,0BAA0B,wBAAwB,iBAAiB,gCAAgC,YAAY,0BAA0B,qCAAqC,4BAA4B,eAAe;AAChQ;;;;;;ACDe;AACf;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,mBAAmB,EAAE,IAAI,EAAE,IAAI,EAAE;AACjC;AACA;;;ACpB2B;;AAEZ,MAAM,OAAG;AACxB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,qBAAqB,KAAK;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACvB2B;AACJ;;AAEvB;AACA;;AAEe,MAAM,0BAAY;AACjC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,KAAK;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,KAAK;AAC1B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,OAAG;AACpC,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,mBAAmB,kBAAkB;AACrC,+BAA+B,OAAG;AAClC;AACA;;AAEA;AACA,mBAAmB,kBAAkB;AACrC;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,mBAAmB,4BAA4B;AAC/C,qBAAqB,4BAA4B;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,mBAAmB,4BAA4B;AAC/C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;AC5G0C;AAC1C;AACe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,0BAAY;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AC3CsO,CAAgB,2HAAG,EAAC,C;;;;;ACA3P;;AAEA;AACA;AACA;;AAEe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,qBAAqB;AACrB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AC5F4G;AACvC;AACL;AACsC;;;AAGtG;AACgH;AAChH,gBAAgB,kBAAU;AAC1B,EAAE,6CAAM;AACR,EAAE,MAAM;AACR,EAAE,eAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACe,uE;;ACpBf;AACyD;;AAEzD;AACA,iBAAe;AACf,gBAAgB,iBAAe,OAAO,iBAAe;AACrD;;AAEA;AACe,gFAAe;;;ACT9B;AACiD;;AAEjD;AACA;AACA,EAAE,0BAAe;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEe;AACf;AACA;AACA;AACA,EAAE,2CAAe;AACjB,CAAC;;;AC1BuB;AACA;AACT,yFAAG;AACI;;;;;;;;;ACHtB;AAAA;AAAA;AAAssB,CAAgB,gtBAAG,EAAC,C;;;;;;;ACA1tB,uC","file":"vue-particle-line.common.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"2b43\");\n","// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var i\n  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/))) {\n    __webpack_public_path__ = i[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-particle-line\"},[_c('div',{staticClass:\"slot-wraper\"},[_vm._t(\"default\")],2),_c('canvas',{staticClass:\"canvas\",attrs:{\"id\":\"canvas\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export default class Color {\n  constructor (min) {\n    this.min = min || 0\n    this._init(this.min)\n  }\n\n  _init (min) {\n    this.r = this.colorValue(min)\n    this.g = this.colorValue(min)\n    this.b = this.colorValue(min)\n    this.style = this.createColorStyle(this.r, this.g, this.b)\n  }\n\n  colorValue (min) {\n    return Math.floor(Math.random() * 255 + min)\n  }\n\n  createColorStyle (r, g, b) {\n    return `rgba(${r}, ${g}, ${b}, .8)`\n  }\n}\n","import Color from './color'\n\nexport default class Dot {\n  constructor (ctx, canvasWidth, canvasHeight, x, y) {\n    this.ctx = ctx\n    this.x = x || Math.random() * canvasWidth\n    this.y = y || Math.random() * canvasHeight\n    this._init()\n  }\n\n  _init () {\n    this.vx = -0.5 + Math.random()\n    this.vy = -0.5 + Math.random()\n    this.radius = Math.random() * 3\n    this.color = new Color()\n  }\n\n  draw () {\n    this.ctx.beginPath()\n    this.ctx.fillStyle = this.color.style\n    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)\n    this.ctx.fill()\n  }\n}\n","import Color from './color'\nimport Dot from './dot'\n\nconst minWidth = 1200\nconst minHeight = 700\n\nexport default class ParticleLine {\n  constructor (tagId, options) {\n    this.tagId = tagId\n    this.options = options\n    this.init()\n  }\n\n  init () {\n    const canvas = document.querySelector(this.tagId)\n    const ctx = canvas.getContext('2d')\n    canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3\n    ctx.strokeStyle = (new Color(150)).style\n    this.dots = {\n      nb: (this.options && this.options.dotsNumber) || 100,\n      distance: (this.options && this.options.dotsDistance) || 100,\n      array: []\n    }\n    this.canvas = canvas\n    this.ctx = ctx\n    this.color = new Color()\n    this.createDots(this.ctx, this.canvas.width, this.canvas.height)\n    this.animateDots()\n    this.hoverEffect()\n  }\n\n  hoverEffect () {\n    if (this.options && this.options.hoverEffect) {\n      this.canvas.addEventListener('mousemove', e => {\n        if (this.dots.array.length > this.dots.nb) {\n          this.dots.array.pop()\n        }\n        this.dots.array.push(new Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))\n      })\n    }\n  }\n\n  resize () {\n    const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    this.canvas.width = width\n    this.canvas.height = height\n    this.createDots(this.ctx, width, height)\n  }\n\n  mixComponents (comp1, weight1, comp2, weight2) {\n    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)\n  }\n\n  averageColorStyles (dot1, dot2) {\n    const color1 = dot1.color\n    const color2 = dot2.color\n    const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)\n    const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)\n    const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)\n    return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))\n  }\n\n  createDots (ctx, canvasWidth, canvasHeight) {\n    this.dots.array = []\n    for (let i = 0; i < this.dots.nb; i++) {\n      this.dots.array.push(new Dot(ctx, canvasWidth, canvasHeight))\n    }\n  }\n\n  moveDots () {\n    for (let i = 0; i < this.dots.nb; i++) {\n      const dot = this.dots.array[i]\n      if (dot.y < 0 || dot.y > this.canvas.height) {\n        dot.vx = dot.vx // eslint-disable-line\n        dot.vy = -dot.vy\n      } else if (dot.x < 0 || dot.x > this.canvas.width) {\n        dot.vx = -dot.vx\n        dot.vy = dot.vy // eslint-disable-line\n      }\n      dot.x += dot.vx\n      dot.y += dot.vy\n    }\n  }\n\n  connectDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      for (let j = 0; j < this.dots.array.length; j++) {\n        const iDot = this.dots.array[i]\n        const jDot = this.dots.array[j]\n        if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {\n          this.ctx.beginPath()\n          this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)\n          this.ctx.moveTo(iDot.x, iDot.y)\n          this.ctx.lineTo(jDot.x, jDot.y)\n          this.ctx.stroke()\n          this.ctx.closePath()\n        }\n      }\n    }\n  }\n\n  drawDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      const dot = this.dots.array[i]\n      dot.draw()\n    }\n  }\n\n  animateDots () {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.drawDots()\n    this.connectDots()\n    this.moveDots()\n    requestAnimationFrame(this.animateDots.bind(this))\n  }\n}\n","<template>\n  <div class=\"vue-particle-line\">\n    <div class=\"slot-wraper\">\n      <slot></slot>\n    </div>\n    <canvas id=\"canvas\" class=\"canvas\"></canvas>\n  </div>\n</template>\n\n<script>\nimport ParticleLine from './particle-line'\n// import { debounce } from 'common/js/utils'\nexport default {\n  name: 'vue-particle-line',\n  props: {\n    lineWidth: {\n      type: Number,\n      default: 0.3\n    },\n    dotsNumber: {\n      type: Number,\n      default: 100\n    },\n    dotsDistance: {\n      type: Number,\n      default: 100\n    },\n    hoverEffect: {\n      type: Boolean,\n      default: true\n    }\n  },\n  mounted () {\n    /* eslint-disable no-new */\n    new ParticleLine('canvas', {\n      lineWidth: this.lineWidth,\n      dotsNumber: this.dotsNumber,\n      dotsDistance: this.dotsDistance,\n      hoverEffect: this.hoverEffect\n    })\n    // particleLine.init()\n    // window.onresize = debounce(() => particleLine.resize(), 500)\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.vue-particle-line {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  .slot-wraper {\n    z-index: 1;\n  }\n  .canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nexport default function normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = 'data-v-' + scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n","import { render, staticRenderFns } from \"./vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&\"\nimport script from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"06727b55\",\n  null\n  \n)\n\ncomponent.options.__file = \"vue-particle-line.vue\"\nexport default component.exports","// 导入组件，组件必须声明 name\nimport vueParticleLine from './src/vue-particle-line.vue'\n\n// 为组件提供 install 安装方法，供按需引入\nvueParticleLine.install = function (Vue) {\n  Vue.component(vueParticleLine.name, vueParticleLine)\n}\n\n// 默认导出组件\nexport default vueParticleLine\n","// 导入组件\nimport vueParticleLine from './vue-particle-line'\n\n// 存储组件列表\nconst components = [\n  vueParticleLine\n]\n\n// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册\nconst install = function (Vue) {\n  // 判断是否安装\n  if (install.installed) return\n  // 遍历注册全局组件\n  components.map(component => Vue.component(component.name, component))\n}\n\n// 判断是否是直接引入文件\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue)\n}\n\nexport default {\n  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装\n  install,\n  // 以下是具体的组件列表\n  vueParticleLine\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","import mod from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/vue-particle-line.umd.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://vue-particle-line/webpack/universalModuleDefinition","webpack://vue-particle-line/webpack/bootstrap","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?8c04","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/color.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/dot.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/index.js","webpack://vue-particle-line/packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?2169","webpack://vue-particle-line/./node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/index.js","webpack://vue-particle-line/./packages/index.js","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/entry-lib.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?66ac","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?e399"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;AClFA;;AAEA;AACA,MAAM,eAAC;AACP,OAAO,eAAC,sCAAsC,eAAC,GAAG,eAAC;AACnD,IAAI,qBAAuB,GAAG,eAAC;AAC/B;AACA;;AAEA;AACe,sDAAI;;;ACVnB,0BAA0B,aAAa,0BAA0B,wBAAwB,iBAAiB,gCAAgC,YAAY,0BAA0B,qCAAqC,4BAA4B,eAAe;AAChQ;;;;;;ACDe;AACf;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,mBAAmB,EAAE,IAAI,EAAE,IAAI,EAAE;AACjC;AACA;;;ACpB2B;;AAEZ,MAAM,OAAG;AACxB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,qBAAqB,KAAK;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACvB2B;AACJ;;AAEvB;AACA;;AAEe,MAAM,0BAAY;AACjC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,KAAK;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,KAAK;AAC1B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,OAAG;AACpC,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,mBAAmB,kBAAkB;AACrC,+BAA+B,OAAG;AAClC;AACA;;AAEA;AACA,mBAAmB,kBAAkB;AACrC;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,mBAAmB,4BAA4B;AAC/C,qBAAqB,4BAA4B;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,mBAAmB,4BAA4B;AAC/C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;AC5G0C;AAC1C;AACe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,0BAAY;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AC3CsO,CAAgB,2HAAG,EAAC,C;;;;;ACA3P;;AAEA;AACA;AACA;;AAEe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,qBAAqB;AACrB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AC5F4G;AACvC;AACL;AACsC;;;AAGtG;AACgH;AAChH,gBAAgB,kBAAU;AAC1B,EAAE,6CAAM;AACR,EAAE,MAAM;AACR,EAAE,eAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACe,uE;;ACpBf;AACyD;;AAEzD;AACA,iBAAe;AACf,gBAAgB,iBAAe,OAAO,iBAAe;AACrD;;AAEA;AACe,gFAAe;;;ACT9B;AACiD;;AAEjD;AACA;AACA,EAAE,0BAAe;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEe;AACf;AACA;AACA;AACA,EAAE,2CAAe;AACjB,CAAC;;;AC1BuB;AACA;AACT,yFAAG;AACI;;;;;;;;;ACHtB;AAAA;AAAA;AAAssB,CAAgB,gtBAAG,EAAC,C;;;;;;;ACA1tB,uC","file":"vue-particle-line.umd.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-particle-line\"] = factory();\n\telse\n\t\troot[\"vue-particle-line\"] = factory();\n})((typeof self !== 'undefined' ? self : this), function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"2b43\");\n","// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var i\n  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/))) {\n    __webpack_public_path__ = i[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-particle-line\"},[_c('div',{staticClass:\"slot-wraper\"},[_vm._t(\"default\")],2),_c('canvas',{staticClass:\"canvas\",attrs:{\"id\":\"canvas\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export default class Color {\n  constructor (min) {\n    this.min = min || 0\n    this._init(this.min)\n  }\n\n  _init (min) {\n    this.r = this.colorValue(min)\n    this.g = this.colorValue(min)\n    this.b = this.colorValue(min)\n    this.style = this.createColorStyle(this.r, this.g, this.b)\n  }\n\n  colorValue (min) {\n    return Math.floor(Math.random() * 255 + min)\n  }\n\n  createColorStyle (r, g, b) {\n    return `rgba(${r}, ${g}, ${b}, .8)`\n  }\n}\n","import Color from './color'\n\nexport default class Dot {\n  constructor (ctx, canvasWidth, canvasHeight, x, y) {\n    this.ctx = ctx\n    this.x = x || Math.random() * canvasWidth\n    this.y = y || Math.random() * canvasHeight\n    this._init()\n  }\n\n  _init () {\n    this.vx = -0.5 + Math.random()\n    this.vy = -0.5 + Math.random()\n    this.radius = Math.random() * 3\n    this.color = new Color()\n  }\n\n  draw () {\n    this.ctx.beginPath()\n    this.ctx.fillStyle = this.color.style\n    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)\n    this.ctx.fill()\n  }\n}\n","import Color from './color'\nimport Dot from './dot'\n\nconst minWidth = 1200\nconst minHeight = 700\n\nexport default class ParticleLine {\n  constructor (tagId, options) {\n    this.tagId = tagId\n    this.options = options\n    this.init()\n  }\n\n  init () {\n    const canvas = document.querySelector(this.tagId)\n    const ctx = canvas.getContext('2d')\n    canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3\n    ctx.strokeStyle = (new Color(150)).style\n    this.dots = {\n      nb: (this.options && this.options.dotsNumber) || 100,\n      distance: (this.options && this.options.dotsDistance) || 100,\n      array: []\n    }\n    this.canvas = canvas\n    this.ctx = ctx\n    this.color = new Color()\n    this.createDots(this.ctx, this.canvas.width, this.canvas.height)\n    this.animateDots()\n    this.hoverEffect()\n  }\n\n  hoverEffect () {\n    if (this.options && this.options.hoverEffect) {\n      this.canvas.addEventListener('mousemove', e => {\n        if (this.dots.array.length > this.dots.nb) {\n          this.dots.array.pop()\n        }\n        this.dots.array.push(new Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))\n      })\n    }\n  }\n\n  resize () {\n    const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    this.canvas.width = width\n    this.canvas.height = height\n    this.createDots(this.ctx, width, height)\n  }\n\n  mixComponents (comp1, weight1, comp2, weight2) {\n    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)\n  }\n\n  averageColorStyles (dot1, dot2) {\n    const color1 = dot1.color\n    const color2 = dot2.color\n    const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)\n    const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)\n    const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)\n    return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))\n  }\n\n  createDots (ctx, canvasWidth, canvasHeight) {\n    this.dots.array = []\n    for (let i = 0; i < this.dots.nb; i++) {\n      this.dots.array.push(new Dot(ctx, canvasWidth, canvasHeight))\n    }\n  }\n\n  moveDots () {\n    for (let i = 0; i < this.dots.nb; i++) {\n      const dot = this.dots.array[i]\n      if (dot.y < 0 || dot.y > this.canvas.height) {\n        dot.vx = dot.vx // eslint-disable-line\n        dot.vy = -dot.vy\n      } else if (dot.x < 0 || dot.x > this.canvas.width) {\n        dot.vx = -dot.vx\n        dot.vy = dot.vy // eslint-disable-line\n      }\n      dot.x += dot.vx\n      dot.y += dot.vy\n    }\n  }\n\n  connectDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      for (let j = 0; j < this.dots.array.length; j++) {\n        const iDot = this.dots.array[i]\n        const jDot = this.dots.array[j]\n        if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {\n          this.ctx.beginPath()\n          this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)\n          this.ctx.moveTo(iDot.x, iDot.y)\n          this.ctx.lineTo(jDot.x, jDot.y)\n          this.ctx.stroke()\n          this.ctx.closePath()\n        }\n      }\n    }\n  }\n\n  drawDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      const dot = this.dots.array[i]\n      dot.draw()\n    }\n  }\n\n  animateDots () {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.drawDots()\n    this.connectDots()\n    this.moveDots()\n    requestAnimationFrame(this.animateDots.bind(this))\n  }\n}\n","<template>\n  <div class=\"vue-particle-line\">\n    <div class=\"slot-wraper\">\n      <slot></slot>\n    </div>\n    <canvas id=\"canvas\" class=\"canvas\"></canvas>\n  </div>\n</template>\n\n<script>\nimport ParticleLine from './particle-line'\n// import { debounce } from 'common/js/utils'\nexport default {\n  name: 'vue-particle-line',\n  props: {\n    lineWidth: {\n      type: Number,\n      default: 0.3\n    },\n    dotsNumber: {\n      type: Number,\n      default: 100\n    },\n    dotsDistance: {\n      type: Number,\n      default: 100\n    },\n    hoverEffect: {\n      type: Boolean,\n      default: true\n    }\n  },\n  mounted () {\n    /* eslint-disable no-new */\n    new ParticleLine('canvas', {\n      lineWidth: this.lineWidth,\n      dotsNumber: this.dotsNumber,\n      dotsDistance: this.dotsDistance,\n      hoverEffect: this.hoverEffect\n    })\n    // particleLine.init()\n    // window.onresize = debounce(() => particleLine.resize(), 500)\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.vue-particle-line {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  .slot-wraper {\n    z-index: 1;\n  }\n  .canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nexport default function normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = 'data-v-' + scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n","import { render, staticRenderFns } from \"./vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&\"\nimport script from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"06727b55\",\n  null\n  \n)\n\ncomponent.options.__file = \"vue-particle-line.vue\"\nexport default component.exports","// 导入组件，组件必须声明 name\nimport vueParticleLine from './src/vue-particle-line.vue'\n\n// 为组件提供 install 安装方法，供按需引入\nvueParticleLine.install = function (Vue) {\n  Vue.component(vueParticleLine.name, vueParticleLine)\n}\n\n// 默认导出组件\nexport default vueParticleLine\n","// 导入组件\nimport vueParticleLine from './vue-particle-line'\n\n// 存储组件列表\nconst components = [\n  vueParticleLine\n]\n\n// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册\nconst install = function (Vue) {\n  // 判断是否安装\n  if (install.installed) return\n  // 遍历注册全局组件\n  components.map(component => Vue.component(component.name, component))\n}\n\n// 判断是否是直接引入文件\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue)\n}\n\nexport default {\n  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装\n  install,\n  // 以下是具体的组件列表\n  vueParticleLine\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","import mod from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/vue-particle-line.common.js:
--------------------------------------------------------------------------------
  1 | module.exports =
  2 | /******/ (function(modules) { // webpackBootstrap
  3 | /******/ 	// The module cache
  4 | /******/ 	var installedModules = {};
  5 | /******/
  6 | /******/ 	// The require function
  7 | /******/ 	function __webpack_require__(moduleId) {
  8 | /******/
  9 | /******/ 		// Check if module is in cache
 10 | /******/ 		if(installedModules[moduleId]) {
 11 | /******/ 			return installedModules[moduleId].exports;
 12 | /******/ 		}
 13 | /******/ 		// Create a new module (and put it into the cache)
 14 | /******/ 		var module = installedModules[moduleId] = {
 15 | /******/ 			i: moduleId,
 16 | /******/ 			l: false,
 17 | /******/ 			exports: {}
 18 | /******/ 		};
 19 | /******/
 20 | /******/ 		// Execute the module function
 21 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 22 | /******/
 23 | /******/ 		// Flag the module as loaded
 24 | /******/ 		module.l = true;
 25 | /******/
 26 | /******/ 		// Return the exports of the module
 27 | /******/ 		return module.exports;
 28 | /******/ 	}
 29 | /******/
 30 | /******/
 31 | /******/ 	// expose the modules object (__webpack_modules__)
 32 | /******/ 	__webpack_require__.m = modules;
 33 | /******/
 34 | /******/ 	// expose the module cache
 35 | /******/ 	__webpack_require__.c = installedModules;
 36 | /******/
 37 | /******/ 	// define getter function for harmony exports
 38 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 39 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 40 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 41 | /******/ 		}
 42 | /******/ 	};
 43 | /******/
 44 | /******/ 	// define __esModule on exports
 45 | /******/ 	__webpack_require__.r = function(exports) {
 46 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 47 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 48 | /******/ 		}
 49 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 50 | /******/ 	};
 51 | /******/
 52 | /******/ 	// create a fake namespace object
 53 | /******/ 	// mode & 1: value is a module id, require it
 54 | /******/ 	// mode & 2: merge all properties of value into the ns
 55 | /******/ 	// mode & 4: return value when already ns object
 56 | /******/ 	// mode & 8|1: behave like require
 57 | /******/ 	__webpack_require__.t = function(value, mode) {
 58 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 59 | /******/ 		if(mode & 8) return value;
 60 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 61 | /******/ 		var ns = Object.create(null);
 62 | /******/ 		__webpack_require__.r(ns);
 63 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 64 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 65 | /******/ 		return ns;
 66 | /******/ 	};
 67 | /******/
 68 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 69 | /******/ 	__webpack_require__.n = function(module) {
 70 | /******/ 		var getter = module && module.__esModule ?
 71 | /******/ 			function getDefault() { return module['default']; } :
 72 | /******/ 			function getModuleExports() { return module; };
 73 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 74 | /******/ 		return getter;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// Object.prototype.hasOwnProperty.call
 78 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 79 | /******/
 80 | /******/ 	// __webpack_public_path__
 81 | /******/ 	__webpack_require__.p = "";
 82 | /******/
 83 | /******/
 84 | /******/ 	// Load entry module and return exports
 85 | /******/ 	return __webpack_require__(__webpack_require__.s = "2b43");
 86 | /******/ })
 87 | /************************************************************************/
 88 | /******/ ({
 89 | 
 90 | /***/ "2b43":
 91 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 92 | 
 93 | "use strict";
 94 | __webpack_require__.r(__webpack_exports__);
 95 | 
 96 | // CONCATENATED MODULE: ./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/setPublicPath.js
 97 | // This file is imported into lib/wc client bundles.
 98 | 
 99 | if (typeof window !== 'undefined') {
100 |   var setPublicPath_i
101 |   if ((setPublicPath_i = window.document.currentScript) && (setPublicPath_i = setPublicPath_i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
102 |     __webpack_require__.p = setPublicPath_i[1] // eslint-disable-line
103 |   }
104 | }
105 | 
106 | // Indicate to webpack that this file can be concatenated
107 | /* harmony default export */ var setPublicPath = (null);
108 | 
109 | // CONCATENATED MODULE: ./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2bf59b84-vue-loader-template"}!./node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.4.2@vue-loader/lib??vue-loader-options!./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&
110 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-particle-line"},[_c('div',{staticClass:"slot-wraper"},[_vm._t("default")],2),_c('canvas',{staticClass:"canvas",attrs:{"id":"canvas"}})])}
111 | var staticRenderFns = []
112 | 
113 | 
114 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&
115 | 
116 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/color.js
117 | class Color {
118 |   constructor (min) {
119 |     this.min = min || 0
120 |     this._init(this.min)
121 |   }
122 | 
123 |   _init (min) {
124 |     this.r = this.colorValue(min)
125 |     this.g = this.colorValue(min)
126 |     this.b = this.colorValue(min)
127 |     this.style = this.createColorStyle(this.r, this.g, this.b)
128 |   }
129 | 
130 |   colorValue (min) {
131 |     return Math.floor(Math.random() * 255 + min)
132 |   }
133 | 
134 |   createColorStyle (r, g, b) {
135 |     return `rgba(${r}, ${g}, ${b}, .8)`
136 |   }
137 | }
138 | 
139 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/dot.js
140 | 
141 | 
142 | class dot_Dot {
143 |   constructor (ctx, canvasWidth, canvasHeight, x, y) {
144 |     this.ctx = ctx
145 |     this.x = x || Math.random() * canvasWidth
146 |     this.y = y || Math.random() * canvasHeight
147 |     this._init()
148 |   }
149 | 
150 |   _init () {
151 |     this.vx = -0.5 + Math.random()
152 |     this.vy = -0.5 + Math.random()
153 |     this.radius = Math.random() * 3
154 |     this.color = new Color()
155 |   }
156 | 
157 |   draw () {
158 |     this.ctx.beginPath()
159 |     this.ctx.fillStyle = this.color.style
160 |     this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
161 |     this.ctx.fill()
162 |   }
163 | }
164 | 
165 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/index.js
166 | 
167 | 
168 | 
169 | const minWidth = 1200
170 | const minHeight = 700
171 | 
172 | class particle_line_ParticleLine {
173 |   constructor (tagId, options) {
174 |     this.tagId = tagId
175 |     this.options = options
176 |     this.init()
177 |   }
178 | 
179 |   init () {
180 |     const canvas = document.querySelector(this.tagId)
181 |     const ctx = canvas.getContext('2d')
182 |     canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
183 |     canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
184 |     ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3
185 |     ctx.strokeStyle = (new Color(150)).style
186 |     this.dots = {
187 |       nb: (this.options && this.options.dotsNumber) || 100,
188 |       distance: (this.options && this.options.dotsDistance) || 100,
189 |       array: []
190 |     }
191 |     this.canvas = canvas
192 |     this.ctx = ctx
193 |     this.color = new Color()
194 |     this.createDots(this.ctx, this.canvas.width, this.canvas.height)
195 |     this.animateDots()
196 |     this.hoverEffect()
197 |   }
198 | 
199 |   hoverEffect () {
200 |     if (this.options && this.options.hoverEffect) {
201 |       this.canvas.addEventListener('mousemove', e => {
202 |         if (this.dots.array.length > this.dots.nb) {
203 |           this.dots.array.pop()
204 |         }
205 |         this.dots.array.push(new dot_Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))
206 |       })
207 |     }
208 |   }
209 | 
210 |   resize () {
211 |     const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
212 |     const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
213 |     this.canvas.width = width
214 |     this.canvas.height = height
215 |     this.createDots(this.ctx, width, height)
216 |   }
217 | 
218 |   mixComponents (comp1, weight1, comp2, weight2) {
219 |     return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)
220 |   }
221 | 
222 |   averageColorStyles (dot1, dot2) {
223 |     const color1 = dot1.color
224 |     const color2 = dot2.color
225 |     const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)
226 |     const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)
227 |     const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)
228 |     return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))
229 |   }
230 | 
231 |   createDots (ctx, canvasWidth, canvasHeight) {
232 |     this.dots.array = []
233 |     for (let i = 0; i < this.dots.nb; i++) {
234 |       this.dots.array.push(new dot_Dot(ctx, canvasWidth, canvasHeight))
235 |     }
236 |   }
237 | 
238 |   moveDots () {
239 |     for (let i = 0; i < this.dots.nb; i++) {
240 |       const dot = this.dots.array[i]
241 |       if (dot.y < 0 || dot.y > this.canvas.height) {
242 |         dot.vx = dot.vx // eslint-disable-line
243 |         dot.vy = -dot.vy
244 |       } else if (dot.x < 0 || dot.x > this.canvas.width) {
245 |         dot.vx = -dot.vx
246 |         dot.vy = dot.vy // eslint-disable-line
247 |       }
248 |       dot.x += dot.vx
249 |       dot.y += dot.vy
250 |     }
251 |   }
252 | 
253 |   connectDots () {
254 |     for (let i = 0; i < this.dots.array.length; i++) {
255 |       for (let j = 0; j < this.dots.array.length; j++) {
256 |         const iDot = this.dots.array[i]
257 |         const jDot = this.dots.array[j]
258 |         if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {
259 |           this.ctx.beginPath()
260 |           this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)
261 |           this.ctx.moveTo(iDot.x, iDot.y)
262 |           this.ctx.lineTo(jDot.x, jDot.y)
263 |           this.ctx.stroke()
264 |           this.ctx.closePath()
265 |         }
266 |       }
267 |     }
268 |   }
269 | 
270 |   drawDots () {
271 |     for (let i = 0; i < this.dots.array.length; i++) {
272 |       const dot = this.dots.array[i]
273 |       dot.draw()
274 |     }
275 |   }
276 | 
277 |   animateDots () {
278 |     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
279 |     this.drawDots()
280 |     this.connectDots()
281 |     this.moveDots()
282 |     requestAnimationFrame(this.animateDots.bind(this))
283 |   }
284 | }
285 | 
286 | // CONCATENATED MODULE: ./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.4.2@vue-loader/lib??vue-loader-options!./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=script&lang=js&
287 | //
288 | //
289 | //
290 | //
291 | //
292 | //
293 | //
294 | //
295 | //
296 | 
297 | 
298 | // import { debounce } from 'common/js/utils'
299 | /* harmony default export */ var vue_particle_linevue_type_script_lang_js_ = ({
300 |   name: 'vue-particle-line',
301 |   props: {
302 |     lineWidth: {
303 |       type: Number,
304 |       default: 0.3
305 |     },
306 |     dotsNumber: {
307 |       type: Number,
308 |       default: 100
309 |     },
310 |     dotsDistance: {
311 |       type: Number,
312 |       default: 100
313 |     },
314 |     hoverEffect: {
315 |       type: Boolean,
316 |       default: true
317 |     }
318 |   },
319 |   mounted () {
320 |     /* eslint-disable no-new */
321 |     new particle_line_ParticleLine('canvas', {
322 |       lineWidth: this.lineWidth,
323 |       dotsNumber: this.dotsNumber,
324 |       dotsDistance: this.dotsDistance,
325 |       hoverEffect: this.hoverEffect
326 |     })
327 |     // particleLine.init()
328 |     // window.onresize = debounce(() => particleLine.resize(), 500)
329 |   }
330 | });
331 | 
332 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=script&lang=js&
333 |  /* harmony default export */ var src_vue_particle_linevue_type_script_lang_js_ = (vue_particle_linevue_type_script_lang_js_); 
334 | // EXTERNAL MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&
335 | var vue_particle_linevue_type_style_index_0_id_06727b55_lang_scss_scoped_true_ = __webpack_require__("7bb6");
336 | 
337 | // CONCATENATED MODULE: ./node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js
338 | /* globals __VUE_SSR_CONTEXT__ */
339 | 
340 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
341 | // This module is a runtime utility for cleaner component module output and will
342 | // be included in the final webpack user bundle.
343 | 
344 | function normalizeComponent (
345 |   scriptExports,
346 |   render,
347 |   staticRenderFns,
348 |   functionalTemplate,
349 |   injectStyles,
350 |   scopeId,
351 |   moduleIdentifier, /* server only */
352 |   shadowMode /* vue-cli only */
353 | ) {
354 |   // Vue.extend constructor export interop
355 |   var options = typeof scriptExports === 'function'
356 |     ? scriptExports.options
357 |     : scriptExports
358 | 
359 |   // render functions
360 |   if (render) {
361 |     options.render = render
362 |     options.staticRenderFns = staticRenderFns
363 |     options._compiled = true
364 |   }
365 | 
366 |   // functional template
367 |   if (functionalTemplate) {
368 |     options.functional = true
369 |   }
370 | 
371 |   // scopedId
372 |   if (scopeId) {
373 |     options._scopeId = 'data-v-' + scopeId
374 |   }
375 | 
376 |   var hook
377 |   if (moduleIdentifier) { // server build
378 |     hook = function (context) {
379 |       // 2.3 injection
380 |       context =
381 |         context || // cached call
382 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
383 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
384 |       // 2.2 with runInNewContext: true
385 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
386 |         context = __VUE_SSR_CONTEXT__
387 |       }
388 |       // inject component styles
389 |       if (injectStyles) {
390 |         injectStyles.call(this, context)
391 |       }
392 |       // register component module identifier for async chunk inferrence
393 |       if (context && context._registeredComponents) {
394 |         context._registeredComponents.add(moduleIdentifier)
395 |       }
396 |     }
397 |     // used by ssr in case component is cached and beforeCreate
398 |     // never gets called
399 |     options._ssrRegister = hook
400 |   } else if (injectStyles) {
401 |     hook = shadowMode
402 |       ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
403 |       : injectStyles
404 |   }
405 | 
406 |   if (hook) {
407 |     if (options.functional) {
408 |       // for template-only hot-reload because in that case the render fn doesn't
409 |       // go through the normalizer
410 |       options._injectStyles = hook
411 |       // register for functioal component in vue file
412 |       var originalRender = options.render
413 |       options.render = function renderWithStyleInjection (h, context) {
414 |         hook.call(context)
415 |         return originalRender(h, context)
416 |       }
417 |     } else {
418 |       // inject component registration as beforeCreate hook
419 |       var existing = options.beforeCreate
420 |       options.beforeCreate = existing
421 |         ? [].concat(existing, hook)
422 |         : [hook]
423 |     }
424 |   }
425 | 
426 |   return {
427 |     exports: scriptExports,
428 |     options: options
429 |   }
430 | }
431 | 
432 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue
433 | 
434 | 
435 | 
436 | 
437 | 
438 | 
439 | /* normalize component */
440 | 
441 | var component = normalizeComponent(
442 |   src_vue_particle_linevue_type_script_lang_js_,
443 |   render,
444 |   staticRenderFns,
445 |   false,
446 |   null,
447 |   "06727b55",
448 |   null
449 |   
450 | )
451 | 
452 | component.options.__file = "vue-particle-line.vue"
453 | /* harmony default export */ var vue_particle_line = (component.exports);
454 | // CONCATENATED MODULE: ./packages/vue-particle-line/index.js
455 | // 导入组件，组件必须声明 name
456 | 
457 | 
458 | // 为组件提供 install 安装方法，供按需引入
459 | vue_particle_line.install = function (Vue) {
460 |   Vue.component(vue_particle_line.name, vue_particle_line)
461 | }
462 | 
463 | // 默认导出组件
464 | /* harmony default export */ var packages_vue_particle_line = (vue_particle_line);
465 | 
466 | // CONCATENATED MODULE: ./packages/index.js
467 | // 导入组件
468 | 
469 | 
470 | // 存储组件列表
471 | const components = [
472 |   packages_vue_particle_line
473 | ]
474 | 
475 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
476 | const install = function (Vue) {
477 |   // 判断是否安装
478 |   if (install.installed) return
479 |   // 遍历注册全局组件
480 |   components.map(component => Vue.component(component.name, component))
481 | }
482 | 
483 | // 判断是否是直接引入文件
484 | if (typeof window !== 'undefined' && window.Vue) {
485 |   install(window.Vue)
486 | }
487 | 
488 | /* harmony default export */ var packages_0 = ({
489 |   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
490 |   install,
491 |   // 以下是具体的组件列表
492 |   vueParticleLine: packages_vue_particle_line
493 | });
494 | 
495 | // CONCATENATED MODULE: ./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/entry-lib.js
496 | 
497 | 
498 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (packages_0);
499 | 
500 | 
501 | 
502 | /***/ }),
503 | 
504 | /***/ "7bb6":
505 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
506 | 
507 | "use strict";
508 | /* harmony import */ var _node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8787");
509 | /* harmony import */ var _node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
510 | /* unused harmony reexport * */
511 |  /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); 
512 | 
513 | /***/ }),
514 | 
515 | /***/ "8787":
516 | /***/ (function(module, exports, __webpack_require__) {
517 | 
518 | // extracted by mini-css-extract-plugin
519 | 
520 | /***/ })
521 | 
522 | /******/ });
523 | //# sourceMappingURL=vue-particle-line.common.js.map


--------------------------------------------------------------------------------
/dist/vue-particle-line.umd.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["vue-particle-line"] = factory();
  8 | 	else
  9 | 		root["vue-particle-line"] = factory();
 10 | })((typeof self !== 'undefined' ? self : this), function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 50 | /******/ 		}
 51 | /******/ 	};
 52 | /******/
 53 | /******/ 	// define __esModule on exports
 54 | /******/ 	__webpack_require__.r = function(exports) {
 55 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 56 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 57 | /******/ 		}
 58 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 59 | /******/ 	};
 60 | /******/
 61 | /******/ 	// create a fake namespace object
 62 | /******/ 	// mode & 1: value is a module id, require it
 63 | /******/ 	// mode & 2: merge all properties of value into the ns
 64 | /******/ 	// mode & 4: return value when already ns object
 65 | /******/ 	// mode & 8|1: behave like require
 66 | /******/ 	__webpack_require__.t = function(value, mode) {
 67 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 68 | /******/ 		if(mode & 8) return value;
 69 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 70 | /******/ 		var ns = Object.create(null);
 71 | /******/ 		__webpack_require__.r(ns);
 72 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 73 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 74 | /******/ 		return ns;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 78 | /******/ 	__webpack_require__.n = function(module) {
 79 | /******/ 		var getter = module && module.__esModule ?
 80 | /******/ 			function getDefault() { return module['default']; } :
 81 | /******/ 			function getModuleExports() { return module; };
 82 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 83 | /******/ 		return getter;
 84 | /******/ 	};
 85 | /******/
 86 | /******/ 	// Object.prototype.hasOwnProperty.call
 87 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 88 | /******/
 89 | /******/ 	// __webpack_public_path__
 90 | /******/ 	__webpack_require__.p = "";
 91 | /******/
 92 | /******/
 93 | /******/ 	// Load entry module and return exports
 94 | /******/ 	return __webpack_require__(__webpack_require__.s = "2b43");
 95 | /******/ })
 96 | /************************************************************************/
 97 | /******/ ({
 98 | 
 99 | /***/ "2b43":
100 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
101 | 
102 | "use strict";
103 | __webpack_require__.r(__webpack_exports__);
104 | 
105 | // CONCATENATED MODULE: ./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/setPublicPath.js
106 | // This file is imported into lib/wc client bundles.
107 | 
108 | if (typeof window !== 'undefined') {
109 |   var setPublicPath_i
110 |   if ((setPublicPath_i = window.document.currentScript) && (setPublicPath_i = setPublicPath_i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
111 |     __webpack_require__.p = setPublicPath_i[1] // eslint-disable-line
112 |   }
113 | }
114 | 
115 | // Indicate to webpack that this file can be concatenated
116 | /* harmony default export */ var setPublicPath = (null);
117 | 
118 | // CONCATENATED MODULE: ./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2bf59b84-vue-loader-template"}!./node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.4.2@vue-loader/lib??vue-loader-options!./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&
119 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-particle-line"},[_c('div',{staticClass:"slot-wraper"},[_vm._t("default")],2),_c('canvas',{staticClass:"canvas",attrs:{"id":"canvas"}})])}
120 | var staticRenderFns = []
121 | 
122 | 
123 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&
124 | 
125 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/color.js
126 | class Color {
127 |   constructor (min) {
128 |     this.min = min || 0
129 |     this._init(this.min)
130 |   }
131 | 
132 |   _init (min) {
133 |     this.r = this.colorValue(min)
134 |     this.g = this.colorValue(min)
135 |     this.b = this.colorValue(min)
136 |     this.style = this.createColorStyle(this.r, this.g, this.b)
137 |   }
138 | 
139 |   colorValue (min) {
140 |     return Math.floor(Math.random() * 255 + min)
141 |   }
142 | 
143 |   createColorStyle (r, g, b) {
144 |     return `rgba(${r}, ${g}, ${b}, .8)`
145 |   }
146 | }
147 | 
148 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/dot.js
149 | 
150 | 
151 | class dot_Dot {
152 |   constructor (ctx, canvasWidth, canvasHeight, x, y) {
153 |     this.ctx = ctx
154 |     this.x = x || Math.random() * canvasWidth
155 |     this.y = y || Math.random() * canvasHeight
156 |     this._init()
157 |   }
158 | 
159 |   _init () {
160 |     this.vx = -0.5 + Math.random()
161 |     this.vy = -0.5 + Math.random()
162 |     this.radius = Math.random() * 3
163 |     this.color = new Color()
164 |   }
165 | 
166 |   draw () {
167 |     this.ctx.beginPath()
168 |     this.ctx.fillStyle = this.color.style
169 |     this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
170 |     this.ctx.fill()
171 |   }
172 | }
173 | 
174 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/particle-line/index.js
175 | 
176 | 
177 | 
178 | const minWidth = 1200
179 | const minHeight = 700
180 | 
181 | class particle_line_ParticleLine {
182 |   constructor (tagId, options) {
183 |     this.tagId = tagId
184 |     this.options = options
185 |     this.init()
186 |   }
187 | 
188 |   init () {
189 |     const canvas = document.querySelector(this.tagId)
190 |     const ctx = canvas.getContext('2d')
191 |     canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
192 |     canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
193 |     ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3
194 |     ctx.strokeStyle = (new Color(150)).style
195 |     this.dots = {
196 |       nb: (this.options && this.options.dotsNumber) || 100,
197 |       distance: (this.options && this.options.dotsDistance) || 100,
198 |       array: []
199 |     }
200 |     this.canvas = canvas
201 |     this.ctx = ctx
202 |     this.color = new Color()
203 |     this.createDots(this.ctx, this.canvas.width, this.canvas.height)
204 |     this.animateDots()
205 |     this.hoverEffect()
206 |   }
207 | 
208 |   hoverEffect () {
209 |     if (this.options && this.options.hoverEffect) {
210 |       this.canvas.addEventListener('mousemove', e => {
211 |         if (this.dots.array.length > this.dots.nb) {
212 |           this.dots.array.pop()
213 |         }
214 |         this.dots.array.push(new dot_Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))
215 |       })
216 |     }
217 |   }
218 | 
219 |   resize () {
220 |     const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth
221 |     const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight
222 |     this.canvas.width = width
223 |     this.canvas.height = height
224 |     this.createDots(this.ctx, width, height)
225 |   }
226 | 
227 |   mixComponents (comp1, weight1, comp2, weight2) {
228 |     return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)
229 |   }
230 | 
231 |   averageColorStyles (dot1, dot2) {
232 |     const color1 = dot1.color
233 |     const color2 = dot2.color
234 |     const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)
235 |     const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)
236 |     const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)
237 |     return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))
238 |   }
239 | 
240 |   createDots (ctx, canvasWidth, canvasHeight) {
241 |     this.dots.array = []
242 |     for (let i = 0; i < this.dots.nb; i++) {
243 |       this.dots.array.push(new dot_Dot(ctx, canvasWidth, canvasHeight))
244 |     }
245 |   }
246 | 
247 |   moveDots () {
248 |     for (let i = 0; i < this.dots.nb; i++) {
249 |       const dot = this.dots.array[i]
250 |       if (dot.y < 0 || dot.y > this.canvas.height) {
251 |         dot.vx = dot.vx // eslint-disable-line
252 |         dot.vy = -dot.vy
253 |       } else if (dot.x < 0 || dot.x > this.canvas.width) {
254 |         dot.vx = -dot.vx
255 |         dot.vy = dot.vy // eslint-disable-line
256 |       }
257 |       dot.x += dot.vx
258 |       dot.y += dot.vy
259 |     }
260 |   }
261 | 
262 |   connectDots () {
263 |     for (let i = 0; i < this.dots.array.length; i++) {
264 |       for (let j = 0; j < this.dots.array.length; j++) {
265 |         const iDot = this.dots.array[i]
266 |         const jDot = this.dots.array[j]
267 |         if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {
268 |           this.ctx.beginPath()
269 |           this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)
270 |           this.ctx.moveTo(iDot.x, iDot.y)
271 |           this.ctx.lineTo(jDot.x, jDot.y)
272 |           this.ctx.stroke()
273 |           this.ctx.closePath()
274 |         }
275 |       }
276 |     }
277 |   }
278 | 
279 |   drawDots () {
280 |     for (let i = 0; i < this.dots.array.length; i++) {
281 |       const dot = this.dots.array[i]
282 |       dot.draw()
283 |     }
284 |   }
285 | 
286 |   animateDots () {
287 |     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
288 |     this.drawDots()
289 |     this.connectDots()
290 |     this.moveDots()
291 |     requestAnimationFrame(this.animateDots.bind(this))
292 |   }
293 | }
294 | 
295 | // CONCATENATED MODULE: ./node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.4.2@vue-loader/lib??vue-loader-options!./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=script&lang=js&
296 | //
297 | //
298 | //
299 | //
300 | //
301 | //
302 | //
303 | //
304 | //
305 | 
306 | 
307 | // import { debounce } from 'common/js/utils'
308 | /* harmony default export */ var vue_particle_linevue_type_script_lang_js_ = ({
309 |   name: 'vue-particle-line',
310 |   props: {
311 |     lineWidth: {
312 |       type: Number,
313 |       default: 0.3
314 |     },
315 |     dotsNumber: {
316 |       type: Number,
317 |       default: 100
318 |     },
319 |     dotsDistance: {
320 |       type: Number,
321 |       default: 100
322 |     },
323 |     hoverEffect: {
324 |       type: Boolean,
325 |       default: true
326 |     }
327 |   },
328 |   mounted () {
329 |     /* eslint-disable no-new */
330 |     new particle_line_ParticleLine('canvas', {
331 |       lineWidth: this.lineWidth,
332 |       dotsNumber: this.dotsNumber,
333 |       dotsDistance: this.dotsDistance,
334 |       hoverEffect: this.hoverEffect
335 |     })
336 |     // particleLine.init()
337 |     // window.onresize = debounce(() => particleLine.resize(), 500)
338 |   }
339 | });
340 | 
341 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=script&lang=js&
342 |  /* harmony default export */ var src_vue_particle_linevue_type_script_lang_js_ = (vue_particle_linevue_type_script_lang_js_); 
343 | // EXTERNAL MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&
344 | var vue_particle_linevue_type_style_index_0_id_06727b55_lang_scss_scoped_true_ = __webpack_require__("7bb6");
345 | 
346 | // CONCATENATED MODULE: ./node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js
347 | /* globals __VUE_SSR_CONTEXT__ */
348 | 
349 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
350 | // This module is a runtime utility for cleaner component module output and will
351 | // be included in the final webpack user bundle.
352 | 
353 | function normalizeComponent (
354 |   scriptExports,
355 |   render,
356 |   staticRenderFns,
357 |   functionalTemplate,
358 |   injectStyles,
359 |   scopeId,
360 |   moduleIdentifier, /* server only */
361 |   shadowMode /* vue-cli only */
362 | ) {
363 |   // Vue.extend constructor export interop
364 |   var options = typeof scriptExports === 'function'
365 |     ? scriptExports.options
366 |     : scriptExports
367 | 
368 |   // render functions
369 |   if (render) {
370 |     options.render = render
371 |     options.staticRenderFns = staticRenderFns
372 |     options._compiled = true
373 |   }
374 | 
375 |   // functional template
376 |   if (functionalTemplate) {
377 |     options.functional = true
378 |   }
379 | 
380 |   // scopedId
381 |   if (scopeId) {
382 |     options._scopeId = 'data-v-' + scopeId
383 |   }
384 | 
385 |   var hook
386 |   if (moduleIdentifier) { // server build
387 |     hook = function (context) {
388 |       // 2.3 injection
389 |       context =
390 |         context || // cached call
391 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
392 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
393 |       // 2.2 with runInNewContext: true
394 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
395 |         context = __VUE_SSR_CONTEXT__
396 |       }
397 |       // inject component styles
398 |       if (injectStyles) {
399 |         injectStyles.call(this, context)
400 |       }
401 |       // register component module identifier for async chunk inferrence
402 |       if (context && context._registeredComponents) {
403 |         context._registeredComponents.add(moduleIdentifier)
404 |       }
405 |     }
406 |     // used by ssr in case component is cached and beforeCreate
407 |     // never gets called
408 |     options._ssrRegister = hook
409 |   } else if (injectStyles) {
410 |     hook = shadowMode
411 |       ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
412 |       : injectStyles
413 |   }
414 | 
415 |   if (hook) {
416 |     if (options.functional) {
417 |       // for template-only hot-reload because in that case the render fn doesn't
418 |       // go through the normalizer
419 |       options._injectStyles = hook
420 |       // register for functioal component in vue file
421 |       var originalRender = options.render
422 |       options.render = function renderWithStyleInjection (h, context) {
423 |         hook.call(context)
424 |         return originalRender(h, context)
425 |       }
426 |     } else {
427 |       // inject component registration as beforeCreate hook
428 |       var existing = options.beforeCreate
429 |       options.beforeCreate = existing
430 |         ? [].concat(existing, hook)
431 |         : [hook]
432 |     }
433 |   }
434 | 
435 |   return {
436 |     exports: scriptExports,
437 |     options: options
438 |   }
439 | }
440 | 
441 | // CONCATENATED MODULE: ./packages/vue-particle-line/src/vue-particle-line.vue
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | /* normalize component */
449 | 
450 | var component = normalizeComponent(
451 |   src_vue_particle_linevue_type_script_lang_js_,
452 |   render,
453 |   staticRenderFns,
454 |   false,
455 |   null,
456 |   "06727b55",
457 |   null
458 |   
459 | )
460 | 
461 | component.options.__file = "vue-particle-line.vue"
462 | /* harmony default export */ var vue_particle_line = (component.exports);
463 | // CONCATENATED MODULE: ./packages/vue-particle-line/index.js
464 | // 导入组件，组件必须声明 name
465 | 
466 | 
467 | // 为组件提供 install 安装方法，供按需引入
468 | vue_particle_line.install = function (Vue) {
469 |   Vue.component(vue_particle_line.name, vue_particle_line)
470 | }
471 | 
472 | // 默认导出组件
473 | /* harmony default export */ var packages_vue_particle_line = (vue_particle_line);
474 | 
475 | // CONCATENATED MODULE: ./packages/index.js
476 | // 导入组件
477 | 
478 | 
479 | // 存储组件列表
480 | const components = [
481 |   packages_vue_particle_line
482 | ]
483 | 
484 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
485 | const install = function (Vue) {
486 |   // 判断是否安装
487 |   if (install.installed) return
488 |   // 遍历注册全局组件
489 |   components.map(component => Vue.component(component.name, component))
490 | }
491 | 
492 | // 判断是否是直接引入文件
493 | if (typeof window !== 'undefined' && window.Vue) {
494 |   install(window.Vue)
495 | }
496 | 
497 | /* harmony default export */ var packages_0 = ({
498 |   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
499 |   install,
500 |   // 以下是具体的组件列表
501 |   vueParticleLine: packages_vue_particle_line
502 | });
503 | 
504 | // CONCATENATED MODULE: ./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/entry-lib.js
505 | 
506 | 
507 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (packages_0);
508 | 
509 | 
510 | 
511 | /***/ }),
512 | 
513 | /***/ "7bb6":
514 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
515 | 
516 | "use strict";
517 | /* harmony import */ var _node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8787");
518 | /* harmony import */ var _node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
519 | /* unused harmony reexport * */
520 |  /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); 
521 | 
522 | /***/ }),
523 | 
524 | /***/ "8787":
525 | /***/ (function(module, exports, __webpack_require__) {
526 | 
527 | // extracted by mini-css-extract-plugin
528 | 
529 | /***/ })
530 | 
531 | /******/ });
532 | });
533 | //# sourceMappingURL=vue-particle-line.umd.js.map


--------------------------------------------------------------------------------
/dist/vue-particle-line.umd.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://vue-particle-line/webpack/universalModuleDefinition","webpack://vue-particle-line/webpack/bootstrap","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?8c04","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/color.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/dot.js","webpack://vue-particle-line/./packages/vue-particle-line/src/particle-line/index.js","webpack://vue-particle-line/packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?2169","webpack://vue-particle-line/./node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue","webpack://vue-particle-line/./packages/vue-particle-line/index.js","webpack://vue-particle-line/./packages/index.js","webpack://vue-particle-line/./node_modules/_@vue_cli-service@3.2.2@@vue/cli-service/lib/commands/build/entry-lib.js","webpack://vue-particle-line/./packages/vue-particle-line/src/vue-particle-line.vue?66ac"],"names":["root","factory","exports","module","define","amd","self","this","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","setPublicPath_i","window","document","currentScript","src","match","render","_vm","_h","$createElement","_c","_self","staticClass","_t","attrs","id","staticRenderFns","Color","[object Object]","min","_init","colorValue","g","b","style","createColorStyle","Math","floor","random","dot_Dot","ctx","canvasWidth","canvasHeight","x","y","vx","vy","radius","color","beginPath","fillStyle","arc","PI","fill","minWidth","minHeight","particle_line_ParticleLine","tagId","options","init","canvas","querySelector","getContext","width","body","clientWidth","height","clientHeight","lineWidth","strokeStyle","dots","nb","dotsNumber","distance","dotsDistance","array","createDots","animateDots","hoverEffect","addEventListener","e","length","pop","push","pageX","pageY","comp1","weight1","comp2","weight2","dot1","dot2","color1","color2","mixComponents","dot","j","iDot","jDot","averageColorStyles","moveTo","lineTo","stroke","closePath","draw","clearRect","drawDots","connectDots","moveDots","requestAnimationFrame","vue_particle_linevue_type_script_lang_js_","props","type","Number","default","Boolean","src_vue_particle_linevue_type_script_lang_js_","normalizeComponent","scriptExports","functionalTemplate","injectStyles","scopeId","moduleIdentifier","shadowMode","hook","_compiled","functional","_scopeId","context","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","_registeredComponents","add","_ssrRegister","$root","$options","shadowRoot","_injectStyles","originalRender","h","existing","beforeCreate","concat","component","__file","vue_particle_line","install","Vue","packages_vue_particle_line","components","installed","map","packages_0","vueParticleLine","__webpack_exports__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default"],"mappings":"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","file":"vue-particle-line.umd.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-particle-line\"] = factory();\n\telse\n\t\troot[\"vue-particle-line\"] = factory();\n})((typeof self !== 'undefined' ? self : this), function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"2b43\");\n","// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var i\n  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/))) {\n    __webpack_public_path__ = i[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-particle-line\"},[_c('div',{staticClass:\"slot-wraper\"},[_vm._t(\"default\")],2),_c('canvas',{staticClass:\"canvas\",attrs:{\"id\":\"canvas\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export default class Color {\n  constructor (min) {\n    this.min = min || 0\n    this._init(this.min)\n  }\n\n  _init (min) {\n    this.r = this.colorValue(min)\n    this.g = this.colorValue(min)\n    this.b = this.colorValue(min)\n    this.style = this.createColorStyle(this.r, this.g, this.b)\n  }\n\n  colorValue (min) {\n    return Math.floor(Math.random() * 255 + min)\n  }\n\n  createColorStyle (r, g, b) {\n    return `rgba(${r}, ${g}, ${b}, .8)`\n  }\n}\n","import Color from './color'\n\nexport default class Dot {\n  constructor (ctx, canvasWidth, canvasHeight, x, y) {\n    this.ctx = ctx\n    this.x = x || Math.random() * canvasWidth\n    this.y = y || Math.random() * canvasHeight\n    this._init()\n  }\n\n  _init () {\n    this.vx = -0.5 + Math.random()\n    this.vy = -0.5 + Math.random()\n    this.radius = Math.random() * 3\n    this.color = new Color()\n  }\n\n  draw () {\n    this.ctx.beginPath()\n    this.ctx.fillStyle = this.color.style\n    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)\n    this.ctx.fill()\n  }\n}\n","import Color from './color'\nimport Dot from './dot'\n\nconst minWidth = 1200\nconst minHeight = 700\n\nexport default class ParticleLine {\n  constructor (tagId, options) {\n    this.tagId = tagId\n    this.options = options\n    this.init()\n  }\n\n  init () {\n    const canvas = document.querySelector(this.tagId)\n    const ctx = canvas.getContext('2d')\n    canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3\n    ctx.strokeStyle = (new Color(150)).style\n    this.dots = {\n      nb: (this.options && this.options.dotsNumber) || 100,\n      distance: (this.options && this.options.dotsDistance) || 100,\n      array: []\n    }\n    this.canvas = canvas\n    this.ctx = ctx\n    this.color = new Color()\n    this.createDots(this.ctx, this.canvas.width, this.canvas.height)\n    this.animateDots()\n    this.hoverEffect()\n  }\n\n  hoverEffect () {\n    if (this.options && this.options.hoverEffect) {\n      this.canvas.addEventListener('mousemove', e => {\n        if (this.dots.array.length > this.dots.nb) {\n          this.dots.array.pop()\n        }\n        this.dots.array.push(new Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))\n      })\n    }\n  }\n\n  resize () {\n    const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    this.canvas.width = width\n    this.canvas.height = height\n    this.createDots(this.ctx, width, height)\n  }\n\n  mixComponents (comp1, weight1, comp2, weight2) {\n    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)\n  }\n\n  averageColorStyles (dot1, dot2) {\n    const color1 = dot1.color\n    const color2 = dot2.color\n    const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)\n    const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)\n    const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)\n    return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))\n  }\n\n  createDots (ctx, canvasWidth, canvasHeight) {\n    this.dots.array = []\n    for (let i = 0; i < this.dots.nb; i++) {\n      this.dots.array.push(new Dot(ctx, canvasWidth, canvasHeight))\n    }\n  }\n\n  moveDots () {\n    for (let i = 0; i < this.dots.nb; i++) {\n      const dot = this.dots.array[i]\n      if (dot.y < 0 || dot.y > this.canvas.height) {\n        dot.vx = dot.vx // eslint-disable-line\n        dot.vy = -dot.vy\n      } else if (dot.x < 0 || dot.x > this.canvas.width) {\n        dot.vx = -dot.vx\n        dot.vy = dot.vy // eslint-disable-line\n      }\n      dot.x += dot.vx\n      dot.y += dot.vy\n    }\n  }\n\n  connectDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      for (let j = 0; j < this.dots.array.length; j++) {\n        const iDot = this.dots.array[i]\n        const jDot = this.dots.array[j]\n        if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {\n          this.ctx.beginPath()\n          this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)\n          this.ctx.moveTo(iDot.x, iDot.y)\n          this.ctx.lineTo(jDot.x, jDot.y)\n          this.ctx.stroke()\n          this.ctx.closePath()\n        }\n      }\n    }\n  }\n\n  drawDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      const dot = this.dots.array[i]\n      dot.draw()\n    }\n  }\n\n  animateDots () {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.drawDots()\n    this.connectDots()\n    this.moveDots()\n    requestAnimationFrame(this.animateDots.bind(this))\n  }\n}\n","<template>\n  <div class=\"vue-particle-line\">\n    <div class=\"slot-wraper\">\n      <slot></slot>\n    </div>\n    <canvas id=\"canvas\" class=\"canvas\"></canvas>\n  </div>\n</template>\n\n<script>\nimport ParticleLine from './particle-line'\n// import { debounce } from 'common/js/utils'\nexport default {\n  name: 'vue-particle-line',\n  props: {\n    lineWidth: {\n      type: Number,\n      default: 0.3\n    },\n    dotsNumber: {\n      type: Number,\n      default: 100\n    },\n    dotsDistance: {\n      type: Number,\n      default: 100\n    },\n    hoverEffect: {\n      type: Boolean,\n      default: true\n    }\n  },\n  mounted () {\n    /* eslint-disable no-new */\n    new ParticleLine('canvas', {\n      lineWidth: this.lineWidth,\n      dotsNumber: this.dotsNumber,\n      dotsDistance: this.dotsDistance,\n      hoverEffect: this.hoverEffect\n    })\n    // particleLine.init()\n    // window.onresize = debounce(() => particleLine.resize(), 500)\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.vue-particle-line {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  .slot-wraper {\n    z-index: 1;\n  }\n  .canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nexport default function normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = 'data-v-' + scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n","import { render, staticRenderFns } from \"./vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&\"\nimport script from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"06727b55\",\n  null\n  \n)\n\ncomponent.options.__file = \"vue-particle-line.vue\"\nexport default component.exports","// 导入组件，组件必须声明 name\nimport vueParticleLine from './src/vue-particle-line.vue'\n\n// 为组件提供 install 安装方法，供按需引入\nvueParticleLine.install = function (Vue) {\n  Vue.component(vueParticleLine.name, vueParticleLine)\n}\n\n// 默认导出组件\nexport default vueParticleLine\n","// 导入组件\nimport vueParticleLine from './vue-particle-line'\n\n// 存储组件列表\nconst components = [\n  vueParticleLine\n]\n\n// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册\nconst install = function (Vue) {\n  // 判断是否安装\n  if (install.installed) return\n  // 遍历注册全局组件\n  components.map(component => Vue.component(component.name, component))\n}\n\n// 判断是否是直接引入文件\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue)\n}\n\nexport default {\n  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装\n  install,\n  // 以下是具体的组件列表\n  vueParticleLine\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","import mod from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\""],"sourceRoot":""}


--------------------------------------------------------------------------------
/docs/js/index.a9fd204d.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./examples/App.vue?ced5","webpack:///./packages/vue-particle-line/src/vue-particle-line.vue?66ac","webpack:///./examples/components/usage.vue?6dc6","webpack:///./examples/components/banner.vue?1d9c","webpack:///./examples/App.vue?c177","webpack:///./examples/components/banner.vue?9c7c","webpack:///examples/components/banner.vue","webpack:///./examples/components/banner.vue?f7c5","webpack:///./examples/components/banner.vue","webpack:///./examples/components/usage.vue?47fe","webpack:///examples/components/usage.vue","webpack:///./examples/components/usage.vue?8e56","webpack:///./examples/components/usage.vue","webpack:///./examples/components/footer.vue?5479","webpack:///examples/components/footer.vue","webpack:///./examples/components/footer.vue?3482","webpack:///./examples/components/footer.vue","webpack:///examples/App.vue","webpack:///./examples/App.vue?0a73","webpack:///./examples/App.vue","webpack:///./packages/vue-particle-line/src/vue-particle-line.vue?8c04","webpack:///./packages/vue-particle-line/src/particle-line/color.js","webpack:///./packages/vue-particle-line/src/particle-line/dot.js","webpack:///./packages/vue-particle-line/src/particle-line/index.js","webpack:///packages/vue-particle-line/src/vue-particle-line.vue","webpack:///./packages/vue-particle-line/src/vue-particle-line.vue?2169","webpack:///./packages/vue-particle-line/src/vue-particle-line.vue","webpack:///./packages/vue-particle-line/index.js","webpack:///./packages/index.js","webpack:///./examples/main.js"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","index","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_vue_particle_line_vue_vue_type_style_index_0_id_06727b55_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_usage_vue_vue_type_style_index_0_id_20511c3a_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_usage_vue_vue_type_style_index_0_id_20511c3a_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_banner_vue_vue_type_style_index_0_id_94729b58_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_0_5_0_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_1_0_1_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_15_4_2_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_7_1_0_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_1_2_5_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_15_4_2_vue_loader_lib_index_js_vue_loader_options_banner_vue_vue_type_style_index_0_id_94729b58_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","render","_vm","this","_h","$createElement","_c","_self","attrs","id","staticClass","text","title","staticRenderFns","bannervue_type_template_id_94729b58_scoped_true_render","_v","_s","bannervue_type_template_id_94729b58_scoped_true_staticRenderFns","bannervue_type_script_lang_js_","props","components_bannervue_type_script_lang_js_","component","componentNormalizer","options","__file","banner","usagevue_type_template_id_20511c3a_scoped_true_render","_m","appCode","usagevue_type_template_id_20511c3a_scoped_true_staticRenderFns","data-th","usagevue_type_script_lang_js_","[object Object]","_prismjs_1_15_0_prismjs_prism_default","a","highlightAll","components_usagevue_type_script_lang_js_","usage_component","usage","footervue_type_template_id_571f89ef_render","footervue_type_template_id_571f89ef_staticRenderFns","footervue_type_script_lang_js_","components_footervue_type_script_lang_js_","footer_component","footer","Appvue_type_script_lang_js_","components","foot","examples_Appvue_type_script_lang_js_","App_component","App","vue_particle_linevue_type_template_id_06727b55_scoped_true_render","_t","vue_particle_linevue_type_template_id_06727b55_scoped_true_staticRenderFns","Color","min","_init","colorValue","g","b","style","createColorStyle","Math","floor","random","dot_Dot","ctx","canvasWidth","canvasHeight","x","y","vx","vy","radius","color","beginPath","fillStyle","arc","PI","fill","minWidth","minHeight","particle_line_ParticleLine","tagId","init","canvas","document","querySelector","getContext","width","body","clientWidth","height","clientHeight","lineWidth","strokeStyle","dots","nb","dotsNumber","distance","dotsDistance","array","createDots","animateDots","hoverEffect","addEventListener","e","pop","pageX","pageY","comp1","weight1","comp2","weight2","dot1","dot2","color1","color2","mixComponents","dot","iDot","jDot","averageColorStyles","moveTo","lineTo","stroke","closePath","draw","clearRect","drawDots","connectDots","moveDots","requestAnimationFrame","vue_particle_linevue_type_script_lang_js_","type","Number","default","Boolean","src_vue_particle_linevue_type_script_lang_js_","vue_particle_line_component","vue_particle_line","install","Vue","packages_vue_particle_line","installed","map","packages_0","vueParticleLine","vue_runtime_esm","use","config","productionTip","h","$mount"],"mappings":"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","file":"js/index.a9fd204d.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"index\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/vue-particle-line/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","import mod from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"","import mod from \"-!../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./usage.vue?vue&type=style&index=0&id=20511c3a&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./usage.vue?vue&type=style&index=0&id=20511c3a&lang=scss&scoped=true&\"","import mod from \"-!../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./banner.vue?vue&type=style&index=0&id=94729b58&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/_css-loader@1.0.1@css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./banner.vue?vue&type=style&index=0&id=94729b58&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('vue-particle-line',{staticClass:\"banner-wraper\"},[_c('banner',{attrs:{\"text\":_vm.title}})],1),_c('usage'),_c('foot')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"banner\"},[_c('h2',[_vm._v(_vm._s(_vm.text))])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"banner\">\n    <h2>{{text}}</h2>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'banner',\n  props: ['text']\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.banner {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  h2 {\n    font-size: 5em;\n    font-family: Teko, sans-serif;\n    background: linear-gradient(to right, #c62020, #2188e1);\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./banner.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./banner.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./banner.vue?vue&type=template&id=94729b58&scoped=true&\"\nimport script from \"./banner.vue?vue&type=script&lang=js&\"\nexport * from \"./banner.vue?vue&type=script&lang=js&\"\nimport style0 from \"./banner.vue?vue&type=style&index=0&id=94729b58&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"94729b58\",\n  null\n  \n)\n\ncomponent.options.__file = \"banner.vue\"\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"main-section\"},[_c('h3',{staticClass:\"section-title white\"},[_vm._v(\"How to use\")]),_vm._m(0),_c('br'),_vm._m(1),_c('br'),_c('div',{staticClass:\"wrap-code text-left\"},[_c('h4',{staticClass:\"white\"},[_vm._v(\"App.vue file - Simple example\")]),_c('pre',{staticClass:\"language-html\"},[_c('code',[_vm._v(\"\\n\"+_vm._s(_vm.appCode)+\"\\n        \")])])]),_c('br'),_vm._m(2)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('pre',{staticClass:\"npm-code white\"},[_vm._v(\"              \"),_c('code',[_vm._v(\"\\nnpm install vue-particle-line --save\\n              \")]),_vm._v(\"\\n     \")])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrap-code text-left\"},[_c('h4',{staticClass:\"white\"},[_vm._v(\"Main.js file\")]),_c('pre',{staticClass:\"language-js\"},[_c('code',[_vm._v(\"\\nimport Vue from 'vue'\\nimport vueParticleLine from 'vue-particle-line'\\nimport 'vue-particle-line/dist/vue-particle-line.css'\\nVue.use(vueParticleLine)\\n        \")])])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrap-table\"},[_c('h4',{staticClass:\"white text-left\"},[_vm._v(\"Props\")]),_c('table',{staticClass:\"rwd-table\"},[_c('thead',[_c('tr',[_c('th',[_vm._v(\"Prop\")]),_c('th',[_vm._v(\"Type\")]),_c('th',[_vm._v(\"Default\")]),_c('th',[_vm._v(\"Description\")])])]),_c('tr',[_c('td',{attrs:{\"data-th\":\"Prop\"}},[_vm._v(\"lineWidth\")]),_c('td',{attrs:{\"data-th\":\"Type\"}},[_vm._v(\"String\")]),_c('td',{attrs:{\"data-th\":\"Default\"}},[_vm._v(\"0.3\")]),_c('td',{attrs:{\"data-th\":\"Description\"}},[_vm._v(\"Lines width\")])]),_c('tr',[_c('td',{attrs:{\"data-th\":\"Name\"}},[_vm._v(\"dotsNumber\")]),_c('td',{attrs:{\"data-th\":\"Type\"}},[_vm._v(\"Number\")]),_c('td',{attrs:{\"data-th\":\"Default\"}},[_vm._v(\"100\")]),_c('td',{attrs:{\"data-th\":\"Description\"}},[_vm._v(\"\\n            Dots Number\\n          \")])]),_c('tr',[_c('td',{attrs:{\"data-th\":\"Name\"}},[_vm._v(\"dotsDistance\")]),_c('td',{attrs:{\"data-th\":\"Type\"}},[_vm._v(\"Number\")]),_c('td',{attrs:{\"data-th\":\"Default\"}},[_vm._v(\"100\")]),_c('td',{attrs:{\"data-th\":\"Description\"}},[_vm._v(\"\\n            Far as points to connect\\n          \")])]),_c('tr',[_c('td',{attrs:{\"data-th\":\"Name\"}},[_vm._v(\"hoverEffect\")]),_c('td',{attrs:{\"data-th\":\"Type\"}},[_vm._v(\"Boolean\")]),_c('td',{attrs:{\"data-th\":\"Default\"}},[_vm._v(\"true\")]),_c('td',{attrs:{\"data-th\":\"Description\"}},[_vm._v(\"\\n            Mouse hover events\\n          \")])])])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"main-section\">\n    <h3 class=\"section-title white\">How to use</h3>\n    <pre class=\"npm-code white\">\n              <code>\nnpm install vue-particle-line --save\n              </code>\n     </pre>\n\n    <br>\n\n    <div class=\"wrap-code text-left\">\n      <h4 class=\"white\">Main.js file</h4>\n      <pre class=\"language-js\"><code>\nimport Vue from 'vue'\nimport vueParticleLine from 'vue-particle-line'\nimport 'vue-particle-line/dist/vue-particle-line.css'\nVue.use(vueParticleLine)\n        </code></pre>\n    </div>\n    <br>\n    <div class=\"wrap-code text-left\">\n      <h4 class=\"white\">App.vue file - Simple example</h4>\n      <pre class=\"language-html\"><code>\n{{appCode}}\n        </code></pre>\n    </div>\n    <br>\n    <div class=\"wrap-table\">\n      <h4 class=\"white text-left\">Props</h4>\n      <!-- <pre class=\"language-html\">编写中</pre> -->\n      <table class=\"rwd-table\">\n\n        <thead>\n          <tr>\n            <th>Prop</th>\n            <th>Type</th>\n            <th>Default</th>\n            <th>Description</th>\n          </tr>\n        </thead>\n\n        <tr>\n          <td data-th=\"Prop\">lineWidth</td>\n          <td data-th=\"Type\">String</td>\n          <td data-th=\"Default\">0.3</td>\n          <td data-th=\"Description\">Lines width</td>\n        </tr>\n        <tr>\n          <td data-th=\"Name\">dotsNumber</td>\n          <td data-th=\"Type\">Number</td>\n          <td data-th=\"Default\">100</td>\n          <td data-th=\"Description\">\n            Dots Number\n          </td>\n        </tr>\n        <tr>\n          <td data-th=\"Name\">dotsDistance</td>\n          <td data-th=\"Type\">Number</td>\n          <td data-th=\"Default\">100</td>\n          <td data-th=\"Description\">\n            Far as points to connect\n          </td>\n        </tr>\n        <tr>\n          <td data-th=\"Name\">hoverEffect</td>\n          <td data-th=\"Type\">Boolean</td>\n          <td data-th=\"Default\">true</td>\n          <td data-th=\"Description\">\n            Mouse hover events\n          </td>\n        </tr>\n      </table>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Prism from 'prismjs'\nconst appCode = `<template>\n  <div id=\"app\">\n    <vue-particle-line>\n      <router-view />\n    </vue-particle-line>\n  </div>\n</template>`\nexport default {\n  name: 'usage',\n  data () {\n    return {\n      appCode\n    }\n  },\n  mounted () {\n    Prism.highlightAll()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$breakpoint-alpha: 767px;\n.main-section {\n  max-width: 650px;\n  margin: auto;\n  padding: 0 1rem;\n}\n.section-title {\n  margin: 2rem 0 0 0;\n}\n.main-title {\n  color: #fff;\n  z-index: 999;\n  h2 {\n    font-size: 7rem;\n    font-family: \"Teko\", sans-serif;\n    text-shadow: 8px 8px #000000;\n    text-transform: uppercase;\n    margin: 0;\n    @media (max-width: $breakpoint-alpha) {\n      font-size: 3rem;\n    }\n  }\n}\n.rwd-table {\n  margin: 1em 0;\n  min-width: 300px;\n  tr {\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n  }\n  th {\n    display: none;\n  }\n  td {\n    display: block;\n    &:first-child {\n      padding-top: .5em;\n    }\n    &:last-child {\n      padding-bottom: .5em;\n    }\n    &:before {\n      content: attr(data-th)\": \";\n      font-weight: bold;\n      width: 6.5em;\n      display: inline-block;\n      @media (min-width: $breakpoint-alpha) {\n        display: none;\n      }\n    }\n  }\n  th, td {\n    text-align: left;\n    @media (min-width: $breakpoint-alpha) {\n      display: table-cell;\n      padding: .25em .5em;\n\n      &:first-child {\n        padding-left: 0;\n      }\n\n      &:last-child {\n        padding-right: 0;\n      }\n    }\n  }\n}\n\n.rwd-table {\n  width: 100%;\n  color: #fff;\n  overflow: hidden;\n  background: #292929;\n  border-radius: 3px;\n  box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);\n  padding: .5rem;\n  tr {\n    border-color: lighten(#34495E, 10%);\n  }\n  th, td {\n    margin: .5em 1em;\n    @media (min-width: $breakpoint-alpha) {\n      padding: 1em !important;\n    }\n  }\n  th, td:before {\n    color: #dd5;\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./usage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./usage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./usage.vue?vue&type=template&id=20511c3a&scoped=true&\"\nimport script from \"./usage.vue?vue&type=script&lang=js&\"\nexport * from \"./usage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./usage.vue?vue&type=style&index=0&id=20511c3a&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"20511c3a\",\n  null\n  \n)\n\ncomponent.options.__file = \"usage.vue\"\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('footer',{staticClass:\"footer text-center\"},[_c('p',{staticClass:\"white\"},[_vm._v(\"created by hzzly\")])])}]\n\nexport { render, staticRenderFns }","<template>\n  <footer class=\"footer text-center\">\n    <p class=\"white\">created by hzzly</p>\n  </footer>\n</template>\n\n<script>\nexport default {\n  name: 'foot'\n}\n</script>\n","import mod from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./footer.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./footer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./footer.vue?vue&type=template&id=571f89ef&\"\nimport script from \"./footer.vue?vue&type=script&lang=js&\"\nexport * from \"./footer.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\ncomponent.options.__file = \"footer.vue\"\nexport default component.exports","<template>\n  <div id=\"app\">\n    <vue-particle-line class=\"banner-wraper\">\n      <banner :text=\"title\"/>\n    </vue-particle-line>\n    <usage />\n    <foot />\n  </div>\n</template>\n\n<script>\nimport banner from './components/banner'\nimport usage from './components/usage'\nimport foot from './components/footer'\nexport default {\n  name: 'app',\n  components: {\n    banner,\n    usage,\n    foot\n  },\n  data () {\n    return {\n      title: 'vue-particle-line'\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n// 首页风格参考[vue-particles](https://vue-particles.netlify.com/)\n* {\n  box-sizing: border-box;\n}\nhtml,\nbody,\n#app {\n  width: 100%;\n  height: 100%;\n  background: #282e35;\n}\n#app {\n  // font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n  //   \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\",\n  //   \"Microsoft YaHei\", SimSun, sans-serif;\n  font-family: Avenir,Helvetica,Arial,sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: 14px;\n  text-align: center;\n  color: #fff;\n  .banner-wraper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: #283644;\n  }\n}\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"],\npre,\ncode {\n  font-family: Menlo, Monaco, Andale Mono, Ubuntu Mono, monospace !important;\n  @media (max-width: 767px) {\n    font-size: 0.95em;\n  }\n}\npre.language-js,\npre.language-html {\n  max-width: 650px;\n  margin: 1rem auto !important;\n  background: #292929;\n  border-radius: 3px;\n  box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);\n}\n.npm-code {\n  background: #292929;\n  border-radius: 3px;\n  box-shadow: 2px 6px 17px rgba(0, 0, 0, 0.39);\n}\nh1,\nh2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\nh3 {\n  font-weight: 100;\n  font-size: 2rem;\n}\n.white {\n  color: #ffffff;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.footer {\n  margin: 1rem 0;\n}\n</style>\n","import mod from \"-!../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=781105d8&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\ncomponent.options.__file = \"App.vue\"\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-particle-line\"},[_c('div',{staticClass:\"slot-wraper\"},[_vm._t(\"default\")],2),_c('canvas',{staticClass:\"canvas\",attrs:{\"id\":\"canvas\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export default class Color {\n  constructor (min) {\n    this.min = min || 0\n    this._init(this.min)\n  }\n\n  _init (min) {\n    this.r = this.colorValue(min)\n    this.g = this.colorValue(min)\n    this.b = this.colorValue(min)\n    this.style = this.createColorStyle(this.r, this.g, this.b)\n  }\n\n  colorValue (min) {\n    return Math.floor(Math.random() * 255 + min)\n  }\n\n  createColorStyle (r, g, b) {\n    return `rgba(${r}, ${g}, ${b}, .8)`\n  }\n}\n","import Color from './color'\n\nexport default class Dot {\n  constructor (ctx, canvasWidth, canvasHeight, x, y) {\n    this.ctx = ctx\n    this.x = x || Math.random() * canvasWidth\n    this.y = y || Math.random() * canvasHeight\n    this._init()\n  }\n\n  _init () {\n    this.vx = -0.5 + Math.random()\n    this.vy = -0.5 + Math.random()\n    this.radius = Math.random() * 3\n    this.color = new Color()\n  }\n\n  draw () {\n    this.ctx.beginPath()\n    this.ctx.fillStyle = this.color.style\n    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)\n    this.ctx.fill()\n  }\n}\n","import Color from './color'\nimport Dot from './dot'\n\nconst minWidth = 1200\nconst minHeight = 700\n\nexport default class ParticleLine {\n  constructor (tagId, options) {\n    this.tagId = tagId\n    this.options = options\n    this.init()\n  }\n\n  init () {\n    const canvas = document.querySelector(this.tagId)\n    const ctx = canvas.getContext('2d')\n    canvas.width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    canvas.height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    ctx.lineWidth = (this.options && this.options.lineWidth) || 0.3\n    ctx.strokeStyle = (new Color(150)).style\n    this.dots = {\n      nb: (this.options && this.options.dotsNumber) || 100,\n      distance: (this.options && this.options.dotsDistance) || 100,\n      array: []\n    }\n    this.canvas = canvas\n    this.ctx = ctx\n    this.color = new Color()\n    this.createDots(this.ctx, this.canvas.width, this.canvas.height)\n    this.animateDots()\n    this.hoverEffect()\n  }\n\n  hoverEffect () {\n    if (this.options && this.options.hoverEffect) {\n      this.canvas.addEventListener('mousemove', e => {\n        if (this.dots.array.length > this.dots.nb) {\n          this.dots.array.pop()\n        }\n        this.dots.array.push(new Dot(this.ctx, this.canvas.width, this.canvas.height, e.pageX, e.pageY))\n      })\n    }\n  }\n\n  resize () {\n    const width = document.body.clientWidth > minWidth ? document.body.clientWidth : minWidth\n    const height = document.body.clientHeight > minHeight ? document.body.clientHeight : minHeight\n    this.canvas.width = width\n    this.canvas.height = height\n    this.createDots(this.ctx, width, height)\n  }\n\n  mixComponents (comp1, weight1, comp2, weight2) {\n    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2)\n  }\n\n  averageColorStyles (dot1, dot2) {\n    const color1 = dot1.color\n    const color2 = dot2.color\n    const r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius)\n    const g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius)\n    const b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius)\n    return this.color.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b))\n  }\n\n  createDots (ctx, canvasWidth, canvasHeight) {\n    this.dots.array = []\n    for (let i = 0; i < this.dots.nb; i++) {\n      this.dots.array.push(new Dot(ctx, canvasWidth, canvasHeight))\n    }\n  }\n\n  moveDots () {\n    for (let i = 0; i < this.dots.nb; i++) {\n      const dot = this.dots.array[i]\n      if (dot.y < 0 || dot.y > this.canvas.height) {\n        dot.vx = dot.vx // eslint-disable-line\n        dot.vy = -dot.vy\n      } else if (dot.x < 0 || dot.x > this.canvas.width) {\n        dot.vx = -dot.vx\n        dot.vy = dot.vy // eslint-disable-line\n      }\n      dot.x += dot.vx\n      dot.y += dot.vy\n    }\n  }\n\n  connectDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      for (let j = 0; j < this.dots.array.length; j++) {\n        const iDot = this.dots.array[i]\n        const jDot = this.dots.array[j]\n        if ((iDot.x - jDot.x) < this.dots.distance && (iDot.y - jDot.y) < this.dots.distance && (iDot.x - jDot.x) > -this.dots.distance && (iDot.y - jDot.y) > -this.dots.distance) {\n          this.ctx.beginPath()\n          this.ctx.strokeStyle = this.averageColorStyles(iDot, jDot)\n          this.ctx.moveTo(iDot.x, iDot.y)\n          this.ctx.lineTo(jDot.x, jDot.y)\n          this.ctx.stroke()\n          this.ctx.closePath()\n        }\n      }\n    }\n  }\n\n  drawDots () {\n    for (let i = 0; i < this.dots.array.length; i++) {\n      const dot = this.dots.array[i]\n      dot.draw()\n    }\n  }\n\n  animateDots () {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.drawDots()\n    this.connectDots()\n    this.moveDots()\n    requestAnimationFrame(this.animateDots.bind(this))\n  }\n}\n","<template>\n  <div class=\"vue-particle-line\">\n    <div class=\"slot-wraper\">\n      <slot></slot>\n    </div>\n    <canvas id=\"canvas\" class=\"canvas\"></canvas>\n  </div>\n</template>\n\n<script>\nimport ParticleLine from './particle-line'\n// import { debounce } from 'common/js/utils'\nexport default {\n  name: 'vue-particle-line',\n  props: {\n    lineWidth: {\n      type: Number,\n      default: 0.3\n    },\n    dotsNumber: {\n      type: Number,\n      default: 100\n    },\n    dotsDistance: {\n      type: Number,\n      default: 100\n    },\n    hoverEffect: {\n      type: Boolean,\n      default: true\n    }\n  },\n  mounted () {\n    /* eslint-disable no-new */\n    new ParticleLine('canvas', {\n      lineWidth: this.lineWidth,\n      dotsNumber: this.dotsNumber,\n      dotsDistance: this.dotsDistance,\n      hoverEffect: this.hoverEffect\n    })\n    // particleLine.init()\n    // window.onresize = debounce(() => particleLine.resize(), 500)\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.vue-particle-line {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  .slot-wraper {\n    z-index: 1;\n  }\n  .canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/_cache-loader@1.2.5@cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js??vue-loader-options!./vue-particle-line.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./vue-particle-line.vue?vue&type=template&id=06727b55&scoped=true&\"\nimport script from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-particle-line.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-particle-line.vue?vue&type=style&index=0&id=06727b55&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/_vue-loader@15.4.2@vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"06727b55\",\n  null\n  \n)\n\ncomponent.options.__file = \"vue-particle-line.vue\"\nexport default component.exports","// 导入组件，组件必须声明 name\nimport vueParticleLine from './src/vue-particle-line.vue'\n\n// 为组件提供 install 安装方法，供按需引入\nvueParticleLine.install = function (Vue) {\n  Vue.component(vueParticleLine.name, vueParticleLine)\n}\n\n// 默认导出组件\nexport default vueParticleLine\n","// 导入组件\nimport vueParticleLine from './vue-particle-line'\n\n// 存储组件列表\nconst components = [\n  vueParticleLine\n]\n\n// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册\nconst install = function (Vue) {\n  // 判断是否安装\n  if (install.installed) return\n  // 遍历注册全局组件\n  components.map(component => Vue.component(component.name, component))\n}\n\n// 判断是否是直接引入文件\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue)\n}\n\nexport default {\n  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装\n  install,\n  // 以下是具体的组件列表\n  vueParticleLine\n}\n","import 'normalize.css/normalize.css'\nimport 'prismjs/themes/prism.css'\nimport 'prismjs/themes/prism-okaidia.css'\n\nimport Vue from 'vue'\nimport App from './App.vue'\n\n// 导入组件库\nimport vueParticleLine from 'packages/index'\nimport 'vue-particle-line/dist/vue-particle-line.css'\n// 注册组件库\nVue.use(vueParticleLine)\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n"],"sourceRoot":""}


--------------------------------------------------------------------------------