emacroh5lib 1.0.12 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js", 
   "scripts": {

package/src/index.ts

@@ -7,7 +7,7 @@ import ImageViewer from './views/ImageViewer/index.vue'
 import DragResizeView from './views/DragResizeView/index.vue'
 import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer, ImageViewer];
+const components = [FileViewer, ImageViewer, DragResizeView];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;

package/src/views/DragResizeView/vue-drag-resize.js

@@ -185,7 +185,7 @@ export default {
             top: null,
             right: null,
             bottom: null,
-            minHeight: null,
+            minHeight: null
         };
     },
 
@@ -208,16 +208,6 @@ export default {
         this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
         this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
 
-        if (this.name.trim() !== '' && this.isStorage) {
-            let info = JSON.parse(localStorage.getItem("DragResizeView_Info_" + this.name))
-            if (info !== null) {
-                this.x = info.left
-                this.y = info.top
-                this.w = info.width
-                this.h = info.height
-            }
-        }
-
         this.left = this.x;
         this.top = this.y;
         this.right = this.parentWidth - (this.w === 'auto' ? this.$refs.container.scrollWidth : this.w) - this.left;
@@ -247,6 +237,17 @@ export default {
                 cancelHandle.setAttribute('data-drag-cancel', this._uid);
             });
         }
+
+        if (this.name.trim() !== '' && this.isStorage) {
+            let info = JSON.parse(localStorage.getItem("DragResizeView_Info_" + this.name))
+            console.log("拖动", info);
+            if (info !== null) {
+                this.left = info.left
+                this.top = info.top
+                this.right = info.right
+                this.bottom = info.bottom
+            }
+        }
     },
 
     beforeDestroy() {
@@ -711,7 +712,8 @@ export default {
                 throw "unspecified name"
             }
 
-            localStorage.setItem("DragResizeView_Info_" + this.name, JSON.stringify(this.rect))
+            const info = { "left": this.rect.left, "top": this.rect.top, "right": this.right, "bottom": this.bottom }
+            localStorage.setItem("DragResizeView_Info_" + this.name, JSON.stringify(info))
         }
 
     },

package/src/views/DragResizeViewTs/index.vue

@@ -0,0 +1,3 @@
+<template src="./vue-drag-resize.html"></template>
+<script src="./vue-drag-resize.ts"></script>
+<style src="./vue-drag-resize.css"></style>

package/src/views/DragResizeViewTs/vue-drag-resize.css

@@ -0,0 +1,46 @@
+.vdr {
+    position: absolute;
+    box-sizing: border-box;
+}
+.vdr.active:before{
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    outline: 1px dashed #d6d6d6;
+}
+.vdr-stick {
+    box-sizing: border-box;
+    position: absolute;
+    font-size: 1px;
+    background: #ffffff;
+    border: 1px solid #6c6c6c;
+    box-shadow: 0 0 2px #bbb;
+}
+.inactive .vdr-stick {
+    display: none;
+}
+.vdr-stick-tl, .vdr-stick-br {
+    cursor: nwse-resize;
+}
+.vdr-stick-tm, .vdr-stick-bm {
+    left: 50%;
+    cursor: ns-resize;
+}
+.vdr-stick-tr, .vdr-stick-bl {
+    cursor: nesw-resize;
+}
+.vdr-stick-ml, .vdr-stick-mr {
+    top: 50%;
+    cursor: ew-resize;
+}
+.vdr-stick.not-resizable{
+    display: none;
+}
+.content-container{
+    display: block;
+    position: relative;
+}

package/src/views/DragResizeViewTs/vue-drag-resize.html

@@ -0,0 +1,17 @@
+<div class="vdr" :style="positionStyle"
+     :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
+     @mousedown="bodyDown($event)"
+     @touchstart="bodyDown($event)"
+     @touchend="up($event)">
+    <div :style="sizeStyle" class="content-container" ref="container">
+        <slot></slot>
+    </div>
+    <div
+            v-for="stick in sticks"
+            class="vdr-stick"
+            :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
+            @mousedown.stop.prevent="stickDown(stick, $event)"
+            @touchstart.stop.prevent="stickDown(stick, $event)"
+            :style="vdrStick(stick)">
+    </div>
+</div>