emacroh5lib 1.0.14 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/emacroh5lib.min.js +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -1
- package/src/views/DragResizeView/vue-drag-resize.js +2 -1
- package/src/views/DragResizeViewTs/index.vue +3 -0
- package/src/views/DragResizeViewTs/vue-drag-resize.css +46 -0
- package/src/views/DragResizeViewTs/vue-drag-resize.html +17 -0
- package/src/views/DragResizeViewTs/vue-drag-resize.ts +876 -0
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ import ImageViewer from './views/ImageViewer/index.vue'
|
|
|
7
7
|
import DragResizeView from './views/DragResizeView/index.vue'
|
|
8
8
|
import MessageBoxTest from "@/components/MessageBoxTest";
|
|
9
9
|
|
|
10
|
-
const components = [FileViewer, ImageViewer];
|
|
10
|
+
const components = [FileViewer, ImageViewer, DragResizeView];
|
|
11
11
|
|
|
12
12
|
const install = (Vue: any) => {
|
|
13
13
|
if ((install as any).installed) return;
|
|
@@ -185,7 +185,7 @@ export default {
|
|
|
185
185
|
top: null,
|
|
186
186
|
right: null,
|
|
187
187
|
bottom: null,
|
|
188
|
-
minHeight: null
|
|
188
|
+
minHeight: null
|
|
189
189
|
};
|
|
190
190
|
},
|
|
191
191
|
|
|
@@ -240,6 +240,7 @@ export default {
|
|
|
240
240
|
|
|
241
241
|
if (this.name.trim() !== '' && this.isStorage) {
|
|
242
242
|
let info = JSON.parse(localStorage.getItem("DragResizeView_Info_" + this.name))
|
|
243
|
+
console.log("拖动", info);
|
|
243
244
|
if (info !== null) {
|
|
244
245
|
this.left = info.left
|
|
245
246
|
this.top = info.top
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.vdr {
|
|
2
|
+
position: absolute;
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
.vdr.active:before{
|
|
6
|
+
content: '';
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: 0;
|
|
11
|
+
left: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
outline: 1px dashed #d6d6d6;
|
|
14
|
+
}
|
|
15
|
+
.vdr-stick {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
position: absolute;
|
|
18
|
+
font-size: 1px;
|
|
19
|
+
background: #ffffff;
|
|
20
|
+
border: 1px solid #6c6c6c;
|
|
21
|
+
box-shadow: 0 0 2px #bbb;
|
|
22
|
+
}
|
|
23
|
+
.inactive .vdr-stick {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
.vdr-stick-tl, .vdr-stick-br {
|
|
27
|
+
cursor: nwse-resize;
|
|
28
|
+
}
|
|
29
|
+
.vdr-stick-tm, .vdr-stick-bm {
|
|
30
|
+
left: 50%;
|
|
31
|
+
cursor: ns-resize;
|
|
32
|
+
}
|
|
33
|
+
.vdr-stick-tr, .vdr-stick-bl {
|
|
34
|
+
cursor: nesw-resize;
|
|
35
|
+
}
|
|
36
|
+
.vdr-stick-ml, .vdr-stick-mr {
|
|
37
|
+
top: 50%;
|
|
38
|
+
cursor: ew-resize;
|
|
39
|
+
}
|
|
40
|
+
.vdr-stick.not-resizable{
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
.content-container{
|
|
44
|
+
display: block;
|
|
45
|
+
position: relative;
|
|
46
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="vdr" :style="positionStyle"
|
|
2
|
+
:class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
|
|
3
|
+
@mousedown="bodyDown($event)"
|
|
4
|
+
@touchstart="bodyDown($event)"
|
|
5
|
+
@touchend="up($event)">
|
|
6
|
+
<div :style="sizeStyle" class="content-container" ref="container">
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</div>
|
|
9
|
+
<div
|
|
10
|
+
v-for="stick in sticks"
|
|
11
|
+
class="vdr-stick"
|
|
12
|
+
:class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
|
|
13
|
+
@mousedown.stop.prevent="stickDown(stick, $event)"
|
|
14
|
+
@touchstart.stop.prevent="stickDown(stick, $event)"
|
|
15
|
+
:style="vdrStick(stick)">
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|