add new demo

Author: JackPu

demo/demo.min.js

@@ -39,7 +39,7 @@ <h3 class="content-subhead">
                 <div class="user">
                     <img class="avatar" v-bind:src="src"/>
                 </div>
-                <vue-core-image-upload v-bind:class="['pure-button','pure-button-primary','js-btn-crop']" v-bind:crop="false" v-on:imageuploaded="imageuploaded" url="http://101.198.151.190/api/upload.php" extensions="png,gif,jpeg,jpg" input-accept="image/*"></vue-core-image-upload>
+                <vue-core-image-upload v-bind:class="['pure-button','pure-button-primary','js-btn-crop']" v-bind:crop="false" v-on:imageuploaded="imageuploaded" v-bind:max-file-size="5242880" url="http://101.198.151.190/api/upload.php" extensions="png,gif,jpeg,jpg" v-on:errorhandle="errorhandle"  input-accept="image/*"></vue-core-image-upload>
                 <p>Click button to upload your image</p>
                 <pre class="highlight javascript"><code>
 import VueCoreImageUpload  from './vue.core.image.upload.vue';

demo/upload.html

@@ -1,6 +1,6 @@
 {
   "name": "vue-core-image-upload",
-  "version": "2.0.6",
+  "version": "2.0.9",
   "description": "a vue plgin for image upload and crop",
   "main": "index.js",
   "dependencies": {

index.js

@@ -43,15 +43,14 @@ export default class Resize {
     if (!this.el) {
       return;
     }
-    const $dotBox = document.querySelector('.g-crop-image-principal');
-    const dotBoxW = window.getComputedStyle($dotBox).width;
-    const dotBoxH = window.getComputedStyle($dotBox).height;
+    const $dotBox = this.container;
+    const dotBoxW = parseInt(window.getComputedStyle($dotBox).width);
+    const dotBoxH = parseInt(window.getComputedStyle($dotBox).height);
     const $topH = document.querySelector('.info-aside');
     const $halfX = W - dotBoxW;
     const $halfY = H - dotBoxH - window.getComputedStyle($topH).height;
     const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
     const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
-
     if (this.splitX > this.splitY) {
       if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) {
         if (parseInt(this.el.offsetWidth) >= dotBoxW) {
@@ -112,11 +111,6 @@ export default class Resize {
         this.el.style.width = this.el.style.height = dotBoxW;
       }
     }
-    // if(isMobile) {
-    //   document.addEventListener('touchend',this.stopDrag.bind(this),false);
-    // } else {
-    //   document.addEventListener('mouseup',this.stopDrag.bind(this),false);
-    // }
   }
 
   stopDrag() {

package.json

@@ -326,7 +326,7 @@
         if(extensionsArr.length>1) {
             var reg = new RegExp('^[' + extensionsArr.join('|') + ']+$','i');
             if (!reg.test(fileExt)) {
-                return this.__dispatch('errorHandle','TYPE ERROR');
+                return this.__dispatch('errorhandle','TYPE ERROR');
             }
         }
 
@@ -339,8 +339,8 @@
             } else {
                 formatSize = options.maxFileSize.toFixed(2) + 'Byte';
             }
-            this.errorHandle('FILE IS TOO LARGER MAX FILE IS ' + formatSize);
-            return;
+            console.warn('FILE IS TOO LARGER MAX FILE IS ' + formatSize);
+            return this.__dispatch('errorhandle','FILE IS TOO LARGER MAX FILE IS ' + formatSize); 
         }
         
         this.files = e.target.files;