update new crop style

Author: JackPu

site/client/components/doc/cn/CompressImage.vue

@@ -23,7 +23,6 @@
 <script>
 
 import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
-import coreImageCompress from '../../../lib/core-compress-image';
 export default {
   components: {
     VueCoreImageUpload,

site/src/crop.vue

@@ -38,7 +38,10 @@
   height: 100px;
   border:1px solid rgba(255,255,255, .95);
 }
-.crop-box .reference-line{
+.crop-box:after,
+.crop-box:before{
+  content: '';
+  display: block;
   opacity: 0;
   position: absolute;
   left: 33.3333%;
@@ -48,15 +51,17 @@
   background-color: transparent;
   border-color: rgba(255,255,255,.7);
   border-style: solid;
+  border-width: 0;
 }
-.crop-box:active .reference-line{
+.crop-box:active::before,
+.crop-box:active::after{
   opacity: 1;
 }
-.crop-box .reference-line.v{
+.crop-box:before{
   border-left-width: 1px;
   border-right-width: 1px;
 }
-.crop-box .reference-line.h{
+.crop-box:after{
   top: 33.3333%;
   left: 0;
   height: 33.3334%;
@@ -76,6 +81,7 @@
   cursor: se-resize;
   border-radius: 10px;
   background-color: #fff;
+  box-shadow: 0 2px 4px -2px rgba(0,0,0,.25);
 }
 </style>
 
@@ -190,7 +196,6 @@ export default {
       this.container = $container;
       const move = function (ev) {
         const newCropStyle = resize(ev, self.el, $container, coor, self.ratioW / self.ratioH, helper.isMobile);
-        console.log(newCropStyle);
         if (newCropStyle) {
           self.cropCSS.width = newCropStyle.width;
           self.cropCSS.height = newCropStyle.height;
@@ -233,6 +238,7 @@ export default {
       };
       const move = function (ev) {
         const newCropStyle = drag(ev, self.el, coor);
+        console.log(newCropStyle);
         if (newCropStyle) {
           self.cropCSS.left = newCropStyle.left;
           self.cropCSS.top = newCropStyle.top;
@@ -253,7 +259,6 @@ export default {
         document.addEventListener('touchend', stopMove, false);
         return;
       }
-      console.log(1);
       document.addEventListener('mousemove', move, false);
       document.addEventListener('mouseup', stopMove, false);
     },

site/src/lib/drag.js

@@ -2,18 +2,19 @@ import helper from './helper';
 
 const isMobile = helper.isMobile;
 export default function drag(e, el, coor) {
-  if (el) {
+  if (!el) {
     return;
   }
-  const aa = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
-  const bb = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
-  let left = aa - el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - coor.x;
-  let top = bb - el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - coor.y;
+  const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
+  const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
+
+  let left = currentX - el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - coor.x;
+  let top = currentY - el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - coor.y;
   if (left <= 0) {
     left = 0;
   }
   if (left >= coor.maxLeft) {
-    left = this.coor.maxLeft;
+    left = coor.maxLeft;
   }
   if (top <= 0) {
     top = 0;