zydx-plus 1.33.443 → 1.33.446
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/package.json +1 -1
- package/src/components/dragPopup/src/dragPopup.vue +11 -10
- package/src/components/paint/src/paint.vue +118 -111
- package/src/index.js +1 -1
package/package.json
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<slot name="content"></slot>
|
|
21
21
|
</div>
|
|
22
22
|
<div v-show="!fixedStart">
|
|
23
|
-
<i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
|
|
23
|
+
<i class="drag-down" :style="{'bottom': dragStatus&&dragTextShow&&!fixedStart? '-50px':'-30px'}" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
|
|
24
24
|
<i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
|
|
25
25
|
<i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
|
|
26
26
|
</div>
|
|
@@ -152,16 +152,10 @@ export default {
|
|
|
152
152
|
},
|
|
153
153
|
mounted() {
|
|
154
154
|
this.id = Math.random().toString(36).substr(2);
|
|
155
|
-
this.init()
|
|
156
155
|
// 全局监听鼠标抬起事件
|
|
157
156
|
document.addEventListener('mouseup', this.mouseup);
|
|
158
157
|
document.addEventListener('mouseup', this.footUp);
|
|
159
|
-
this
|
|
160
|
-
this.$emit('updateDrag', {
|
|
161
|
-
width: this.footRightOffset,
|
|
162
|
-
height: this.footDownOffset - ((this.dragTextShow)?60:30)
|
|
163
|
-
})
|
|
164
|
-
})
|
|
158
|
+
this.init()
|
|
165
159
|
let popArr = []
|
|
166
160
|
const pop = sessionStorage.getItem('pop')
|
|
167
161
|
popArr = (pop === null)? [] : JSON.parse(pop)
|
|
@@ -188,7 +182,7 @@ export default {
|
|
|
188
182
|
return `top:${this.y}px;left:${this.x}px;width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
|
|
189
183
|
},
|
|
190
184
|
},
|
|
191
|
-
emits: ['dragStatus', 'close', 'enlarge','updateDrag','minimize','dragMouseup'],
|
|
185
|
+
emits: ['dragStatus', 'close', 'enlarge','updateDrag','minimize','dragMouseup', 'updateDragInit'],
|
|
192
186
|
methods: {
|
|
193
187
|
dragTap() {
|
|
194
188
|
let pop = JSON.parse(sessionStorage.getItem('pop'))
|
|
@@ -223,6 +217,14 @@ export default {
|
|
|
223
217
|
this.x = this.clientWidth / 2 - this.footRightOffset / 2;
|
|
224
218
|
this.y = this.clientHeight / 2 - this.footDownOffset / 2;
|
|
225
219
|
}
|
|
220
|
+
this.$nextTick(() => {
|
|
221
|
+
this.$emit('updateDrag', {
|
|
222
|
+
width: this.footRightOffset,
|
|
223
|
+
height: this.footDownOffset - ((this.dragTextShow)?60:30),
|
|
224
|
+
left: this.x,
|
|
225
|
+
top: this.y,
|
|
226
|
+
})
|
|
227
|
+
})
|
|
226
228
|
},
|
|
227
229
|
getWH(v) {
|
|
228
230
|
this.transAll = true
|
|
@@ -371,7 +373,6 @@ export default {
|
|
|
371
373
|
|
|
372
374
|
.drag-down {
|
|
373
375
|
position: absolute;
|
|
374
|
-
bottom: -50px;
|
|
375
376
|
right: 20px;
|
|
376
377
|
width: calc(100% - 20px);
|
|
377
378
|
height: 40px;
|
|
@@ -1,111 +1,117 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
<div class="paint-cont">
|
|
11
|
-
<Sketchpad ref="sketchpad" :top="false"></Sketchpad>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="tool-cont" :style="{left: left + 'px', top: top + 'px'}">
|
|
14
|
-
<div class="tool"
|
|
15
|
-
@mousedown.stop="mousedown"
|
|
16
|
-
@mouseup.stop="mouseup"
|
|
17
|
-
:id="ids + 'tool'">
|
|
18
|
-
<div class="tool-item" v-for="(item,index) in toolArr">
|
|
19
|
-
<div class="tool-img" :class="{'tool-arr-act': item.id === toolId}" :data-index="index">
|
|
20
|
-
<img :src="item.img" alt=""/>
|
|
21
|
-
</div>
|
|
22
|
-
<div class="prompt-paint">{{ item.name }}</div>
|
|
2
|
+
<dragPopup @updateDrag="updateDragInit" :width="940" :height="687" :minWidth="740" :minHeight="487" @close="cancel" :minimizeCir="false" :dragTextShow="false">
|
|
3
|
+
<template #content>
|
|
4
|
+
<div class="paint" :id="ids">
|
|
5
|
+
<div class="paint-title">
|
|
6
|
+
<span>{{ title }}</span>
|
|
7
|
+
<div></div>
|
|
23
8
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div class="
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
9
|
+
<div class="paint-cont">
|
|
10
|
+
<Sketchpad ref="sketchpad" :top="false"></Sketchpad>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="paint-buts">
|
|
13
|
+
<button class="buts" @click="exportTap">确定</button>
|
|
14
|
+
<button class="buts" @click="cancel">取消</button>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="tool-cont" :style="{left: left + 'px', top: top + 'px'}">
|
|
17
|
+
<div class="tool"
|
|
18
|
+
@mousedown.stop="mousedown"
|
|
19
|
+
@mousemove.stop="mousemove"
|
|
20
|
+
@mouseup.stop="mouseup"
|
|
21
|
+
:id="ids + 'tool'">
|
|
22
|
+
<div class="tool-item" v-for="(item,index) in toolArr">
|
|
23
|
+
<div class="tool-img" :class="{'tool-arr-act': item.id === toolId}" :data-index="index">
|
|
24
|
+
<img :src="item.img" alt=""/>
|
|
34
25
|
</div>
|
|
26
|
+
<div class="prompt-paint">{{ item.name }}</div>
|
|
35
27
|
</div>
|
|
36
28
|
</div>
|
|
37
|
-
<div class="
|
|
38
|
-
|
|
39
|
-
<div class="tool-
|
|
40
|
-
<div class="
|
|
41
|
-
<div class="tool-color
|
|
29
|
+
<div class="tool-pop" v-if="toolMenu" :style="{bottom: toolTop + 'px', left: toolLeft + 'px'}">
|
|
30
|
+
<!--颜色-->
|
|
31
|
+
<div class="tool-pop-cont">
|
|
32
|
+
<div class="shape" v-if="['shape'].includes(this.toolId)">
|
|
33
|
+
<div class="tool-color">
|
|
34
|
+
<div class="tool-color-item" v-for="(item,index) in shapeData" @click="shapeTap(index)">
|
|
35
|
+
<div class="tool-color-select" :class="{'tool-active': shapeIndex === index}" :title="item.name">
|
|
36
|
+
<img :src="item.img" alt=""/>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
42
40
|
</div>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<div class="tool-color-text">{{ item.text }}</div>
|
|
41
|
+
<div class="link"></div>
|
|
42
|
+
<div class="tool-color">
|
|
43
|
+
<div class="tool-color-item" v-for="(item,index) in colorData" @click="colorTap(index)">
|
|
44
|
+
<div class="tool-color-select" :class="{'tool-active': colorIndex === index}" :title="item.name">
|
|
45
|
+
<div class="tool-color-col" :style="{'background-color': item.color}"></div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
51
48
|
</div>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
<div class="link"></div>
|
|
50
|
+
<!--大小-->
|
|
51
|
+
<div class="tool-color" v-if="['pen','shape','text'].includes(this.toolId)">
|
|
52
|
+
<div class="tool-color-item" @click="sizeTap(index)" v-for="(item,index) in sizeData">
|
|
53
|
+
<div class="tool-color-select" :class="{'tool-active': sizeIndex === index}" :title="item.name">
|
|
54
|
+
<div class="tool-color-text">{{ item.text }}</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="tool-color" v-if="['pen','shape'].includes(this.toolId)">
|
|
59
|
+
<div class="tool-color-item" @click="linkTap(index)" v-for="(item,index) in linkData">
|
|
60
|
+
<div class="tool-color-select" :class="{'tool-active': linkIndex === index}" :title="item.name">
|
|
61
|
+
<img :src="item.img" alt=""/>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="tool-color" v-if="['shape'].includes(this.toolId)">
|
|
66
|
+
<div class="tool-color-item" @click="fillTap(index)" v-for="(item,index) in fillData">
|
|
67
|
+
<div class="tool-color-select" :class="{'tool-active': fillIndex === index}" :title="item.name">
|
|
68
|
+
<img :src="item.img" alt=""/>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
58
71
|
</div>
|
|
72
|
+
<div class="tool-color" v-if="['text'].includes(this.toolId)">
|
|
73
|
+
<div class="tool-color-item" @click="fontTap(index)" v-for="(item,index) in fontData">
|
|
74
|
+
<div class="tool-color-select" :class="{'tool-active': fontIndex === index}" :title="item.name">
|
|
75
|
+
<img :src="item.img" alt=""/>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<!-- <div class="tool-color" v-if="['text'].includes(this.toolId)">-->
|
|
80
|
+
<!-- <div class="tool-color-item" @click="aligTap(index)" v-for="(item,index) in aligData">-->
|
|
81
|
+
<!-- <div class="tool-color-select" :class="{'tool-active': aligIndex === index}" :title="item.name">-->
|
|
82
|
+
<!-- <img :src="item.img" alt=""/>-->
|
|
83
|
+
<!-- </div>-->
|
|
84
|
+
<!-- </div>-->
|
|
85
|
+
<!-- </div>-->
|
|
59
86
|
</div>
|
|
60
87
|
</div>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
88
|
+
</div>
|
|
89
|
+
<dragPopup :width="600" :height="417" v-if="show" :dragStatus="false" :minimizeCir="false" :enlargeShow="false" @close="close">
|
|
90
|
+
<template #content>
|
|
91
|
+
<div class="can">
|
|
92
|
+
<div class="can-cont" :id="ids + 'cont'">
|
|
93
|
+
<canvas :id="ids + 'can'"></canvas>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="can-but">
|
|
96
|
+
<div class="can-but-cont">
|
|
97
|
+
<span @click="reset">重置</span>
|
|
98
|
+
<span @click="distinguish">{{ distinguishText }}</span>
|
|
99
|
+
</div>
|
|
65
100
|
</div>
|
|
66
101
|
</div>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
102
|
+
<div class="can-pop" v-if="show2">
|
|
103
|
+
<div class="can-pop-cont">
|
|
104
|
+
<img ref="canPopCont" :src="appData" alt="" />
|
|
105
|
+
</div>
|
|
106
|
+
<div class="can-pop-but-cont">
|
|
107
|
+
<div class="can-pop-but" @click="addImage">确认</div>
|
|
72
108
|
</div>
|
|
73
109
|
</div>
|
|
74
|
-
</
|
|
75
|
-
|
|
76
|
-
<!-- <div class="tool-color-item" @click="aligTap(index)" v-for="(item,index) in aligData">-->
|
|
77
|
-
<!-- <div class="tool-color-select" :class="{'tool-active': aligIndex === index}" :title="item.name">-->
|
|
78
|
-
<!-- <img :src="item.img" alt=""/>-->
|
|
79
|
-
<!-- </div>-->
|
|
80
|
-
<!-- </div>-->
|
|
81
|
-
<!-- </div>-->
|
|
82
|
-
</div>
|
|
110
|
+
</template>
|
|
111
|
+
</dragPopup>
|
|
83
112
|
</div>
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
<template #content>
|
|
87
|
-
<div class="can">
|
|
88
|
-
<div class="can-cont" :id="ids + 'cont'">
|
|
89
|
-
<canvas :id="ids + 'can'"></canvas>
|
|
90
|
-
</div>
|
|
91
|
-
<div class="can-but">
|
|
92
|
-
<div class="can-but-cont">
|
|
93
|
-
<span @click="reset">重置</span>
|
|
94
|
-
<span @click="distinguish">{{ distinguishText }}</span>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<div class="can-pop" v-if="show2">
|
|
99
|
-
<div class="can-pop-cont">
|
|
100
|
-
<img ref="canPopCont" :src="appData" alt="" />
|
|
101
|
-
</div>
|
|
102
|
-
<div class="can-pop-but-cont">
|
|
103
|
-
<div class="can-pop-but" @click="addImage">确认</div>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</template>
|
|
107
|
-
</dragPopup>
|
|
108
|
-
</div>
|
|
113
|
+
</template>
|
|
114
|
+
</dragPopup>
|
|
109
115
|
</template>
|
|
110
116
|
|
|
111
117
|
<script>
|
|
@@ -137,7 +143,7 @@ export default {
|
|
|
137
143
|
{id: 'formula', img: require('../src/img/gongsi.png'), name: '公式'},
|
|
138
144
|
{id: 'rubber', img: require('../src/img/shanchu.png'), name: '橡皮'},
|
|
139
145
|
{id: 'clear', img: require('../src/img/qingchu.png'), name: '清屏'},
|
|
140
|
-
{id: 'full', img: require('../src/img/quanping.png'), name: '全屏'},
|
|
146
|
+
// {id: 'full', img: require('../src/img/quanping.png'), name: '全屏'},
|
|
141
147
|
],
|
|
142
148
|
colorData: [
|
|
143
149
|
{color: 'rgb(29, 29, 29)', name: '颜色-黑色', id: 'black'},
|
|
@@ -229,17 +235,20 @@ export default {
|
|
|
229
235
|
this.ids = this.randomId()
|
|
230
236
|
},
|
|
231
237
|
mounted() {
|
|
232
|
-
// 计算工具栏初始位置
|
|
233
|
-
const paint = document.getElementById(this.ids)
|
|
234
|
-
const tool = document.getElementById(this.ids + 'tool')
|
|
235
|
-
this.left = paint.offsetLeft + paint.offsetWidth - tool.offsetWidth - 20
|
|
236
|
-
this.top = paint.offsetTop + paint.offsetHeight / 2 - tool.offsetHeight / 2
|
|
237
238
|
// 绑定鼠标抬起事件
|
|
238
239
|
document.addEventListener('mouseup', this.mouseup)
|
|
239
240
|
// 绑定鼠标移动事件
|
|
240
|
-
document.addEventListener('mousemove', this.mousemove)
|
|
241
|
+
// document.addEventListener('mousemove', this.mousemove)
|
|
241
242
|
},
|
|
242
243
|
methods: {
|
|
244
|
+
updateDragInit(e) {
|
|
245
|
+
setTimeout(() => {
|
|
246
|
+
// 计算工具栏初始位置
|
|
247
|
+
const tool = document.getElementById(this.ids + 'tool')
|
|
248
|
+
this.left = e.left + e.width - tool.offsetWidth - 20
|
|
249
|
+
this.top = e.top + e.height / 2 - tool.offsetHeight / 2
|
|
250
|
+
},0)
|
|
251
|
+
},
|
|
243
252
|
exportTap() {
|
|
244
253
|
Mess({
|
|
245
254
|
type: 'text',
|
|
@@ -468,6 +477,7 @@ export default {
|
|
|
468
477
|
let x = 0;
|
|
469
478
|
let y = 0;
|
|
470
479
|
this.canvasEle.addEventListener("mousedown", (event) => {
|
|
480
|
+
event.preventDefault();
|
|
471
481
|
x = event.offsetX;
|
|
472
482
|
y = event.offsetY;
|
|
473
483
|
isDrawing = true;
|
|
@@ -758,7 +768,7 @@ export default {
|
|
|
758
768
|
|
|
759
769
|
.tool-cont {
|
|
760
770
|
position: fixed;
|
|
761
|
-
z-index:
|
|
771
|
+
z-index: 10000;
|
|
762
772
|
}
|
|
763
773
|
|
|
764
774
|
.tool-item {
|
|
@@ -819,19 +829,16 @@ export default {
|
|
|
819
829
|
}
|
|
820
830
|
|
|
821
831
|
.paint {
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
left: 50%;
|
|
825
|
-
z-index: 10;
|
|
826
|
-
width: 940px;
|
|
827
|
-
height: 687px;
|
|
828
|
-
margin-left: -420px;
|
|
829
|
-
margin-top: -344px;
|
|
832
|
+
width: 100%;
|
|
833
|
+
height: calc(100% - 30px);
|
|
830
834
|
background-color: #fff;
|
|
831
|
-
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
|
|
832
835
|
padding: 0 10px 10px 10px;
|
|
836
|
+
box-sizing: border-box;
|
|
837
|
+
}
|
|
838
|
+
.paint-buts{
|
|
839
|
+
padding: 10px;
|
|
840
|
+
text-align: center;
|
|
833
841
|
}
|
|
834
|
-
|
|
835
842
|
.paint-title {
|
|
836
843
|
font-size: 14px;
|
|
837
844
|
height: 34px;
|