Add area render (#24)

Author: ZYSzys

README.md

@@ -1,6 +1,6 @@
 # vue-canvas-nest
 
-[![Vue](https://img.shields.io/badge/Vue-^2.5-brightgreen.svg)](https://vuejs.org/)
+[![Vue](https://img.shields.io/badge/Vue-2.5-brightgreen.svg)](https://vuejs.org/)
 [![Travis CI](https://travis-ci.org/ZYSzys/vue-canvas-nest.svg?branch=master)](https://travis-ci.org/ZYSzys/vue-canvas-nest)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 [![NPM version](https://img.shields.io/npm/v/vue-canvas-nest.svg?style=flat)](https://npmjs.org/package/vue-canvas-nest)
@@ -36,14 +36,14 @@ export default {
 
 ### How to use
 
-#### Simply use:
+#### Simply use
 ```html
 <vue-canvas-nest></vue-canvas-nest>
 ```
 
-#### With config:
+#### With config or el(area render)
 ```html
-<vue-canvas-nest :config="{color:'255,0,0', count: 88}"></vue-canvas-nest>
+<vue-canvas-nest :config="{color:'255,0,0', count: 88}" :el="'#area'"></vue-canvas-nest>
 ```
 
 ## Config
@@ -53,6 +53,8 @@ export default {
  - **`count`**: the number of lines, default: `99`.
  - **`zIndex`**: the index of z space, default: `-1`.
 
+ **Note: Render the whole page if no el passed by default.**
+
 #### Example:
 ```js
 const config = {

dist/vue-canvas-nest.min.js

@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <vue-canvas-nest :config="config" :el="'#area'"></vue-canvas-nest>
     <div id="cn-router">
       <router-link to="/red"><span style="color: red"> Red </span></router-link>
       <router-link to="/green"><span> Green </span></router-link>
@@ -22,6 +23,8 @@
       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
     </ul>
+    <div id="area" style="width: 400px;height: 300px;position: absolute;right: 0;bottom: 0;border: dashed 1px;">
+    </div>
   </div>
 </template>
 <script>
@@ -33,9 +36,10 @@ export default {
     return {
       msg: 'Welcome to Your Vue.js App',
       config: {
-        color: '0,0,255',
-        count: 150,
-      }
+        color: '0,0,0',
+        count: 70,
+      },
+      el: '#area'
     }
   }
 }

dist/vue-canvas-nest.min.js.map

@@ -11,12 +11,12 @@ export default {
     return {
       config: {
         color: '0,0,255',
-        count: 100,
+        count: 150,
         opacity: 0.9,
         zIndex: 0,
       }
     }
   }
 }
 
-</script>
+</script>

example/App.vue

@@ -8,8 +8,12 @@
   "directories": {
     "example": "example"
   },
+  "files": [
+    "src",
+    "dist"
+  ],
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config=./build/webpack.dev.config.js",
+    "dev": "npm run build && cross-env NODE_ENV=development webpack-dev-server --open --hot --config=./build/webpack.dev.config.js",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=./build/webpack.prod.config.js",
     "example": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=./build/webpack.dev.config.js"
   },

example/dist/vue-canvas-nest-example.js

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-canvas-nest-element" ref="vue_canvas_nest_element">
+  <div class="vue-canvas-nest-element">
   </div>
 </template>
 <script>
@@ -17,19 +17,24 @@ export default {
           zIndex: -1
         }
       }
+    },
+    el: {
+      type: String,
+      default: '.vue-canvas-nest-element'
     }
   },
   mounted() {
     this.createCanvasNest()
   },
   methods: {
     createCanvasNest() {
-      const el = this.$refs.vue_canvas_nest_element
-      this.cn = new CanvasNest(el, this.config)
+      const elm = document.querySelector(this.el)
+      this.cn = new CanvasNest(elm, this.config)
     }
   },
   beforeDestroy () {
-    this.$refs.vue_canvas_nest_element.innerHTML = ''
+    const elm = document.querySelector(this.el)
+    this.cn.destroy()
   }
 }