zydx-plus 1.35.504 → 1.35.505
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
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<div
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<i v-if="closeShow" @click.stop="close"></i>
|
|
2
|
+
<teleport to="body">
|
|
3
|
+
<div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @mousedown.stop="dragTap">
|
|
4
|
+
<div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
|
|
5
|
+
<span :id="'draggable' + id" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
|
|
6
|
+
<div class="drag-i">
|
|
7
|
+
<i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>
|
|
8
|
+
<i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
|
|
9
|
+
<slot name="icon"></slot>
|
|
10
|
+
<i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
|
|
11
|
+
<i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
|
|
12
|
+
<i v-if="closeShow" @click.stop="close"></i>
|
|
13
|
+
</div>
|
|
15
14
|
</div>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<i :class="{'drag-
|
|
25
|
-
|
|
15
|
+
<div :class="{'drag-cont2': fixedStart,'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}"
|
|
16
|
+
@mousemove.stop="footMove" @mouseleave.stop="footMove">
|
|
17
|
+
<div class="drag-cont-slot">
|
|
18
|
+
<slot name="content"></slot>
|
|
19
|
+
</div>
|
|
20
|
+
<div v-show="!fixedStart&&!autoHeight">
|
|
21
|
+
<!-- <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
|
|
22
|
+
<i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
|
|
23
|
+
<!-- <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
|
|
24
|
+
</div>
|
|
26
25
|
</div>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
<div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart&&!autoHeight">
|
|
27
|
+
<div class="down-text-cont">
|
|
28
|
+
<slot name="down"></slot>
|
|
29
|
+
<!-- <img-->
|
|
30
|
+
<!-- src="data:image/png;base64,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"/>-->
|
|
31
|
+
<!-- <span>拖动图标调整窗口大小</span>-->
|
|
32
|
+
</div>
|
|
34
33
|
</div>
|
|
35
34
|
</div>
|
|
36
|
-
</
|
|
35
|
+
</teleport>
|
|
37
36
|
</template>
|
|
38
37
|
|
|
39
38
|
<script>
|
|
39
|
+
import interact from 'interactjs'
|
|
40
40
|
export default {
|
|
41
|
-
name: "zydx-drag-
|
|
41
|
+
name: "zydx-drag-popup2",
|
|
42
42
|
data() {
|
|
43
43
|
return {
|
|
44
44
|
x: 0,//left:x
|
|
@@ -131,6 +131,10 @@ export default {
|
|
|
131
131
|
autoHeight: {
|
|
132
132
|
type: Boolean,
|
|
133
133
|
default: false
|
|
134
|
+
},
|
|
135
|
+
zIndex: {
|
|
136
|
+
type: Number,
|
|
137
|
+
default: 0
|
|
134
138
|
}
|
|
135
139
|
},
|
|
136
140
|
beforeUnmount() {
|
|
@@ -151,7 +155,6 @@ export default {
|
|
|
151
155
|
this.footDownOffset = val
|
|
152
156
|
if (this.isInitShowBottomRight) {
|
|
153
157
|
this.y = window.innerHeight - val
|
|
154
|
-
console.log('this.y', this.y)
|
|
155
158
|
}
|
|
156
159
|
},
|
|
157
160
|
immediate: true
|
|
@@ -165,12 +168,11 @@ export default {
|
|
|
165
168
|
deep: true
|
|
166
169
|
}
|
|
167
170
|
},
|
|
171
|
+
created() {
|
|
172
|
+
this.id = Math.random().toString(36).substr(2)
|
|
173
|
+
},
|
|
168
174
|
mounted() {
|
|
169
|
-
this.id = Math.random().toString(36).substr(2);
|
|
170
175
|
this.init()
|
|
171
|
-
// 全局监听鼠标抬起事件
|
|
172
|
-
document.addEventListener('mousemove', this.mousemove);
|
|
173
|
-
document.addEventListener('mouseup', this.mouseup);
|
|
174
176
|
document.addEventListener('mouseup', this.footUp);
|
|
175
177
|
this.$nextTick(() => {
|
|
176
178
|
this.$emit('updateDrag', {
|
|
@@ -200,9 +202,6 @@ export default {
|
|
|
200
202
|
this.x = this.left + (wid-this.initWidth)/2
|
|
201
203
|
}
|
|
202
204
|
});
|
|
203
|
-
document.onmouseup = () => {
|
|
204
|
-
this.isMove = false;
|
|
205
|
-
}
|
|
206
205
|
this.dragTap()
|
|
207
206
|
},
|
|
208
207
|
computed: {
|
|
@@ -217,6 +216,7 @@ export default {
|
|
|
217
216
|
emits: ['dragStatus', 'close', 'enlarge','updateDrag','minimize','dragMouseup'],
|
|
218
217
|
methods: {
|
|
219
218
|
dragTap() {
|
|
219
|
+
if(this.zIndex <= 0) return
|
|
220
220
|
let pop = JSON.parse(sessionStorage.getItem('pop'))
|
|
221
221
|
for(let i = 0; i< pop.length; i++) {
|
|
222
222
|
if(document.getElementById(pop[i]) === null) continue
|
|
@@ -244,6 +244,7 @@ export default {
|
|
|
244
244
|
this.$emit('dragStatus')
|
|
245
245
|
},
|
|
246
246
|
init() {
|
|
247
|
+
let that = this
|
|
247
248
|
if(this.fixedStart) {
|
|
248
249
|
const wid = document.getElementById('app').offsetWidth
|
|
249
250
|
this.x = this.left + (wid-this.initWidth)/2
|
|
@@ -254,6 +255,28 @@ export default {
|
|
|
254
255
|
this.x = this.clientWidth / 2 - this.footRightOffset / 2;
|
|
255
256
|
this.y = this.clientHeight / 2 - this.footDownOffset / 2;
|
|
256
257
|
}
|
|
258
|
+
setTimeout(() => {
|
|
259
|
+
interact(`#draggable${that.id}`).draggable({
|
|
260
|
+
listeners: {
|
|
261
|
+
move (event) {
|
|
262
|
+
that.y = event.rect.top
|
|
263
|
+
that.x = event.rect.left
|
|
264
|
+
if (that.x < -that.footRightOffset / 2) {
|
|
265
|
+
that.x = -that.footRightOffset / 2
|
|
266
|
+
}
|
|
267
|
+
if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
|
|
268
|
+
that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
|
|
269
|
+
}
|
|
270
|
+
if (that.y < 0) {
|
|
271
|
+
that.y = 0
|
|
272
|
+
}
|
|
273
|
+
if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
|
|
274
|
+
that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
})
|
|
279
|
+
},0)
|
|
257
280
|
},
|
|
258
281
|
getWH(v) {
|
|
259
282
|
this.transAll = true
|
|
@@ -275,7 +298,7 @@ export default {
|
|
|
275
298
|
if (this.direction === 'd') {
|
|
276
299
|
this.footDownOffset = event.clientY - this.y;
|
|
277
300
|
} else if (this.direction === 'in') {
|
|
278
|
-
this.footDownOffset = event.
|
|
301
|
+
this.footDownOffset = event.clientX - this.x;
|
|
279
302
|
this.footRightOffset = event.clientX - this.x;
|
|
280
303
|
} else if (this.direction === 'r') {
|
|
281
304
|
this.footRightOffset = event.clientX - this.x;
|
|
@@ -300,38 +323,6 @@ export default {
|
|
|
300
323
|
})
|
|
301
324
|
this.footIsMove = false;
|
|
302
325
|
},
|
|
303
|
-
mousedown(event) {
|
|
304
|
-
event.preventDefault()
|
|
305
|
-
//鼠标按下事件
|
|
306
|
-
this.leftOffset = event.offsetX;
|
|
307
|
-
this.topOffset = event.offsetY;
|
|
308
|
-
this.isMove = true;
|
|
309
|
-
this.dragTap()
|
|
310
|
-
},
|
|
311
|
-
//鼠标移动
|
|
312
|
-
mousemove(event) {
|
|
313
|
-
if (this.state) return;
|
|
314
|
-
if (!this.isMove) return;
|
|
315
|
-
this.x = event.clientX - this.leftOffset;
|
|
316
|
-
this.y = event.clientY - this.topOffset;
|
|
317
|
-
// 边界判断
|
|
318
|
-
if (this.x < -this.footRightOffset / 2) {
|
|
319
|
-
this.x = -this.footRightOffset / 2
|
|
320
|
-
}
|
|
321
|
-
if (this.x > this.clientWidth - this.footRightOffset + this.footRightOffset / 2) {
|
|
322
|
-
this.x = this.clientWidth - this.footRightOffset + this.footRightOffset / 2
|
|
323
|
-
}
|
|
324
|
-
if (this.y < 0) {
|
|
325
|
-
this.y = 0
|
|
326
|
-
}
|
|
327
|
-
if (this.y > this.clientHeight - this.footDownOffset + this.footDownOffset / 2) {
|
|
328
|
-
this.y = this.clientHeight - this.footDownOffset + this.footDownOffset / 2
|
|
329
|
-
}
|
|
330
|
-
},
|
|
331
|
-
//鼠标抬起
|
|
332
|
-
mouseup() {
|
|
333
|
-
this.isMove = false;
|
|
334
|
-
},
|
|
335
326
|
enlarge() {
|
|
336
327
|
this.state = false
|
|
337
328
|
let clientWidth = document.documentElement.clientWidth;
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<teleport to="body">
|
|
3
3
|
<div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @mousedown.stop="dragTap">
|
|
4
4
|
<div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
|
|
5
|
-
<span :
|
|
5
|
+
<span :id="'draggable' + id" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
|
|
6
6
|
<div class="drag-i">
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
<i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>
|
|
8
|
+
<i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
|
|
9
9
|
<slot name="icon"></slot>
|
|
10
10
|
<i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
|
|
11
11
|
<i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
|
|
@@ -155,7 +155,6 @@ export default {
|
|
|
155
155
|
this.footDownOffset = val
|
|
156
156
|
if (this.isInitShowBottomRight) {
|
|
157
157
|
this.y = window.innerHeight - val
|
|
158
|
-
console.log('this.y', this.y)
|
|
159
158
|
}
|
|
160
159
|
},
|
|
161
160
|
immediate: true
|
|
@@ -169,33 +168,11 @@ export default {
|
|
|
169
168
|
deep: true
|
|
170
169
|
}
|
|
171
170
|
},
|
|
171
|
+
created() {
|
|
172
|
+
this.id = Math.random().toString(36).substr(2)
|
|
173
|
+
},
|
|
172
174
|
mounted() {
|
|
173
|
-
let that = this
|
|
174
|
-
this.id = Math.random().toString(36).substr(2);
|
|
175
175
|
this.init()
|
|
176
|
-
// 全局监听鼠标抬起事件
|
|
177
|
-
setTimeout(() => {
|
|
178
|
-
interact(`.${that.id}draggable`).draggable({
|
|
179
|
-
listeners: {
|
|
180
|
-
move (event) {
|
|
181
|
-
that.y = event.rect.top
|
|
182
|
-
that.x = event.rect.left
|
|
183
|
-
if (that.x < -that.footRightOffset / 2) {
|
|
184
|
-
that.x = -that.footRightOffset / 2
|
|
185
|
-
}
|
|
186
|
-
if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
|
|
187
|
-
that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
|
|
188
|
-
}
|
|
189
|
-
if (that.y < 0) {
|
|
190
|
-
that.y = 0
|
|
191
|
-
}
|
|
192
|
-
if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
|
|
193
|
-
that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
})
|
|
198
|
-
},100)
|
|
199
176
|
document.addEventListener('mouseup', this.footUp);
|
|
200
177
|
this.$nextTick(() => {
|
|
201
178
|
this.$emit('updateDrag', {
|
|
@@ -267,6 +244,7 @@ export default {
|
|
|
267
244
|
this.$emit('dragStatus')
|
|
268
245
|
},
|
|
269
246
|
init() {
|
|
247
|
+
let that = this
|
|
270
248
|
if(this.fixedStart) {
|
|
271
249
|
const wid = document.getElementById('app').offsetWidth
|
|
272
250
|
this.x = this.left + (wid-this.initWidth)/2
|
|
@@ -277,6 +255,28 @@ export default {
|
|
|
277
255
|
this.x = this.clientWidth / 2 - this.footRightOffset / 2;
|
|
278
256
|
this.y = this.clientHeight / 2 - this.footDownOffset / 2;
|
|
279
257
|
}
|
|
258
|
+
setTimeout(() => {
|
|
259
|
+
interact(`#draggable${that.id}`).draggable({
|
|
260
|
+
listeners: {
|
|
261
|
+
move (event) {
|
|
262
|
+
that.y = event.rect.top
|
|
263
|
+
that.x = event.rect.left
|
|
264
|
+
if (that.x < -that.footRightOffset / 2) {
|
|
265
|
+
that.x = -that.footRightOffset / 2
|
|
266
|
+
}
|
|
267
|
+
if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
|
|
268
|
+
that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
|
|
269
|
+
}
|
|
270
|
+
if (that.y < 0) {
|
|
271
|
+
that.y = 0
|
|
272
|
+
}
|
|
273
|
+
if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
|
|
274
|
+
that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
})
|
|
279
|
+
},0)
|
|
280
280
|
},
|
|
281
281
|
getWH(v) {
|
|
282
282
|
this.transAll = true
|
|
@@ -298,7 +298,7 @@ export default {
|
|
|
298
298
|
if (this.direction === 'd') {
|
|
299
299
|
this.footDownOffset = event.clientY - this.y;
|
|
300
300
|
} else if (this.direction === 'in') {
|
|
301
|
-
this.footDownOffset = event.
|
|
301
|
+
this.footDownOffset = event.clientX - this.x;
|
|
302
302
|
this.footRightOffset = event.clientX - this.x;
|
|
303
303
|
} else if (this.direction === 'r') {
|
|
304
304
|
this.footRightOffset = event.clientX - this.x;
|
|
@@ -541,9 +541,3 @@ export default {
|
|
|
541
541
|
z-index: 10000;
|
|
542
542
|
}
|
|
543
543
|
</style>
|
|
544
|
-
<script setup>
|
|
545
|
-
</script>
|
|
546
|
-
<script setup>
|
|
547
|
-
</script>
|
|
548
|
-
<script setup>
|
|
549
|
-
</script>
|
|
@@ -1050,12 +1050,10 @@ export default {
|
|
|
1050
1050
|
handler: function (e) {
|
|
1051
1051
|
let time = setInterval(() => {
|
|
1052
1052
|
if (this.editor) { // 没有时间以后 停止定时器
|
|
1053
|
-
this.editor.setOptions({
|
|
1054
|
-
editable: !e
|
|
1055
|
-
})
|
|
1053
|
+
this.editor.setOptions({editable: !e})
|
|
1056
1054
|
if (this.page) {
|
|
1057
|
-
this.editableShow = !e
|
|
1058
1055
|
setTimeout(() => {
|
|
1056
|
+
this.editableShow = !e
|
|
1059
1057
|
if (e) {
|
|
1060
1058
|
this.readOnlyPage() // 只读分页
|
|
1061
1059
|
}
|
|
@@ -2164,6 +2162,11 @@ export default {
|
|
|
2164
2162
|
this.$refs['read-only'].style.width = '900px'
|
|
2165
2163
|
this.wit = 900
|
|
2166
2164
|
}
|
|
2165
|
+
let element = document.querySelectorAll('.editor-content-show')[0]
|
|
2166
|
+
let witA = element.offsetWidth
|
|
2167
|
+
if (witA !== this.wit) {
|
|
2168
|
+
element.style.width = '900px'
|
|
2169
|
+
}
|
|
2167
2170
|
let max = this.wit * 1.6 - 186
|
|
2168
2171
|
let pHeight = 0
|
|
2169
2172
|
let html = ''
|
|
@@ -2198,7 +2201,7 @@ export default {
|
|
|
2198
2201
|
let mBottom = parseInt(getComputedStyle(data[i]).marginBottom)
|
|
2199
2202
|
let text = data[i].offsetHeight + Bottom + top + mtop + mBottom
|
|
2200
2203
|
if ((pHeight + text) > max) {
|
|
2201
|
-
const {start, end, size} = this.rows(data[i], max - pHeight)
|
|
2204
|
+
const {start, middle, end, size} = this.rows(data[i], max - pHeight,max)
|
|
2202
2205
|
let child = data[i].childNodes[0]
|
|
2203
2206
|
let childNodes = data[i].childNodes[0].childNodes[0]
|
|
2204
2207
|
let fontSize = size
|
|
@@ -2225,28 +2228,48 @@ export default {
|
|
|
2225
2228
|
} else {
|
|
2226
2229
|
label = 'span'
|
|
2227
2230
|
}
|
|
2228
|
-
if
|
|
2229
|
-
if (
|
|
2230
|
-
|
|
2231
|
+
if(start.data!== ''){
|
|
2232
|
+
if (child && child.nodeName !== '#text') {
|
|
2233
|
+
if (childNodes && childNodes.nodeName === 'MARK') {
|
|
2234
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${start.data}</mark></${label}></p>`
|
|
2235
|
+
} else {
|
|
2236
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${start.data}</${label}></p>`
|
|
2237
|
+
}
|
|
2231
2238
|
} else {
|
|
2232
|
-
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${
|
|
2239
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${size}px;">${start.data}</${label}></p>`
|
|
2233
2240
|
}
|
|
2234
|
-
|
|
2235
|
-
|
|
2241
|
+
this.htmlArr.push(html)
|
|
2242
|
+
pHeight = 0
|
|
2243
|
+
html = ''
|
|
2236
2244
|
}
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2245
|
+
if (middle.length){
|
|
2246
|
+
middle.forEach(item=>{
|
|
2247
|
+
if (child && child.nodeName !== '#text') {
|
|
2248
|
+
if (childNodes && childNodes.nodeName === 'MARK') {
|
|
2249
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${item.data}</mark></${label}></p>`
|
|
2250
|
+
} else {
|
|
2251
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${item.data}</${label}></p>`
|
|
2252
|
+
}
|
|
2253
|
+
} else {
|
|
2254
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${item.data}</${label}></p>`
|
|
2255
|
+
}
|
|
2256
|
+
this.htmlArr.push(html)
|
|
2257
|
+
pHeight = 0
|
|
2258
|
+
html = ''
|
|
2259
|
+
})
|
|
2260
|
+
}
|
|
2261
|
+
if(end.data!== ''){
|
|
2262
|
+
if (child && child.nodeName !== '#text') {
|
|
2263
|
+
if (childNodes && childNodes.nodeName === 'MARK') {
|
|
2264
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${end.data}</mark></${label}></p>`
|
|
2265
|
+
} else {
|
|
2266
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${end.data}</${label}></p>`
|
|
2267
|
+
}
|
|
2243
2268
|
} else {
|
|
2244
|
-
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${
|
|
2269
|
+
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${end.data}</${label}></p>`
|
|
2245
2270
|
}
|
|
2246
|
-
|
|
2247
|
-
html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${end.data}</${label}></p>`
|
|
2271
|
+
pHeight = end.size
|
|
2248
2272
|
}
|
|
2249
|
-
pHeight = end.size
|
|
2250
2273
|
} else {
|
|
2251
2274
|
pHeight += text
|
|
2252
2275
|
if (data[i].dataset?.signid !== 'splitLine' && data[i].dataset?.signid !== 'annotationSplitLine' && data[i].dataset?.signid !== 'referenceSplitLine') html += data[i].outerHTML
|
|
@@ -2374,18 +2397,31 @@ export default {
|
|
|
2374
2397
|
this.menus = false
|
|
2375
2398
|
this.menuOne = false
|
|
2376
2399
|
},
|
|
2377
|
-
rows(data, num) {
|
|
2400
|
+
rows(data, num, max) {
|
|
2378
2401
|
let size = parseInt(window.getComputedStyle(data, null).fontSize)
|
|
2379
2402
|
let line = parseInt(window.getComputedStyle(data, null).lineHeight)
|
|
2380
|
-
let width = data.offsetWidth
|
|
2403
|
+
let width = data.offsetWidth-40
|
|
2381
2404
|
let height = data.offsetHeight
|
|
2382
2405
|
let rows = Math.round(num / line) // 行数
|
|
2406
|
+
let rowsA = Math.round( max / line) // 行数
|
|
2383
2407
|
let text = data.innerText
|
|
2384
2408
|
let textLen = this.measureText(text, size, width * rows)
|
|
2385
2409
|
let start = text.slice(0, textLen)
|
|
2410
|
+
let textLenA = this.measureText(text, size, width * rowsA)
|
|
2411
|
+
let ON = Math.round((text.length - textLen)/textLenA)
|
|
2412
|
+
let middle = []
|
|
2413
|
+
for (let i = 0; i < ON; i++) {
|
|
2414
|
+
let obj = {
|
|
2415
|
+
data:text.slice(textLen+1, textLen+textLenA),
|
|
2416
|
+
size:max
|
|
2417
|
+
}
|
|
2418
|
+
middle.push(obj)
|
|
2419
|
+
textLen+=textLenA
|
|
2420
|
+
}
|
|
2386
2421
|
let end = text.slice(textLen)
|
|
2387
2422
|
return {
|
|
2388
2423
|
start: {data: start, size: num},
|
|
2424
|
+
middle:middle,
|
|
2389
2425
|
end: {data: end, size: height - num},
|
|
2390
2426
|
size: size,
|
|
2391
2427
|
// family: fontFamily.replace(/\"/g,"")
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<dragPopup :z-index="10002" title="手写记录" @updateDrag="updateDragInit" :width="width" :height="height" :minWidth="740" :minHeight="487" @close="cancel" :minimizeCir="false" :dragTextShow="false">
|
|
3
3
|
<template #content>
|
|
4
4
|
<div class="paint" :id="ids">
|
|
5
5
|
<div class="paint-title"></div>
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
</template>
|
|
15
|
-
</
|
|
16
|
-
<
|
|
15
|
+
</dragPopup>
|
|
16
|
+
<dragPopup :z-index="10003" :width="600" :height="417" v-if="show" :dragStatus="false" :minimizeCir="false" :enlargeShow="false" @close="close">
|
|
17
17
|
<template #content>
|
|
18
18
|
<div class="can">
|
|
19
19
|
<div class="can-cont" :id="ids + 'cont'">
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
37
|
</template>
|
|
38
|
-
</
|
|
38
|
+
</dragPopup>
|
|
39
39
|
<teleport to="body">
|
|
40
40
|
<div class="tool-cont" :style="{left: left + 'px', top: top + 'px'}">
|
|
41
41
|
<div class="tool"
|
|
@@ -112,14 +112,15 @@
|
|
|
112
112
|
</template>
|
|
113
113
|
|
|
114
114
|
<script>
|
|
115
|
+
import interact from 'interactjs'
|
|
115
116
|
import Sketchpad from '../../sketchpad/src/sketchpad'
|
|
116
|
-
import
|
|
117
|
+
import dragPopup from '../../dragPopup/src/dragPopup'
|
|
117
118
|
import Mess from '../../tipBox/index'
|
|
118
119
|
|
|
119
120
|
let stayTime = 0
|
|
120
121
|
let timer = null
|
|
121
122
|
export default {
|
|
122
|
-
components: {Sketchpad,
|
|
123
|
+
components: {Sketchpad, dragPopup},
|
|
123
124
|
data() {
|
|
124
125
|
return {
|
|
125
126
|
width: 940,
|