sh-view 2.4.22 → 2.5.1
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 +3 -4
- package/packages/components/global-components/sh-split/index.vue +342 -342
- package/packages/components/global-components/sh-tabs/index.vue +30 -14
- package/packages/components/other-components/sh-preview/components/sh-excel.vue +3 -3
- package/packages/components/other-components/sh-preview/components/sh-word.vue +20 -13
- package/packages/components/other-components/sh-preview/js/data-hook.js +6 -2
- package/packages/components/other-components/sh-preview/js/data-props.js +6 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sh-view",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"description": "基于vxe-table二次封装",
|
|
5
5
|
"main": "packages/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -29,15 +29,14 @@
|
|
|
29
29
|
"jszip": "^3.10.1",
|
|
30
30
|
"popper.js": "^1.16.1",
|
|
31
31
|
"resize-observer-polyfill": "^1.5.1",
|
|
32
|
-
"sh-tools": "^2.0.
|
|
32
|
+
"sh-tools": "^2.0.1",
|
|
33
33
|
"tinymce": "^5.10.5",
|
|
34
34
|
"vue": "^3.3.4",
|
|
35
35
|
"vue-masonry": "^0.16.0",
|
|
36
36
|
"vue-router": "^4.2.4",
|
|
37
|
-
"vxe-table": "^4.5.
|
|
37
|
+
"vxe-table": "^4.5.10",
|
|
38
38
|
"vxe-table-plugin-export-pdf": "^3.0.4",
|
|
39
39
|
"vxe-table-plugin-export-xlsx": "^3.0.5",
|
|
40
|
-
"x-data-spreadsheet": "^1.1.9",
|
|
41
40
|
"xe-clipboard": "^1.10.2",
|
|
42
41
|
"xe-utils": "^3.5.13"
|
|
43
42
|
},
|
|
@@ -1,342 +1,342 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div ref="splitRef" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
|
|
3
|
-
<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
|
|
4
|
-
<div v-if="isHorizontal" class="sh-split-horizontal">
|
|
5
|
-
<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
|
|
6
|
-
<slot name="left" />
|
|
7
|
-
</div>
|
|
8
|
-
<div class="sh-split-trigger-con" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
|
|
9
|
-
<slot name="trigger">
|
|
10
|
-
<trigger mode="vertical" />
|
|
11
|
-
</slot>
|
|
12
|
-
</div>
|
|
13
|
-
<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
|
|
14
|
-
<slot name="right" />
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
<div v-else class="sh-split-vertical">
|
|
18
|
-
<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
|
|
19
|
-
<slot name="top" />
|
|
20
|
-
</div>
|
|
21
|
-
<div class="sh-split-trigger-con" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
|
|
22
|
-
<slot name="trigger">
|
|
23
|
-
<trigger mode="horizontal" />
|
|
24
|
-
</slot>
|
|
25
|
-
</div>
|
|
26
|
-
<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
|
|
27
|
-
<slot name="bottom" />
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
</template>
|
|
32
|
-
|
|
33
|
-
<script>
|
|
34
|
-
import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, nextTick } from 'vue'
|
|
35
|
-
import trigger from './components/trigger.vue'
|
|
36
|
-
export default defineComponent({
|
|
37
|
-
name: 'ShSplit',
|
|
38
|
-
components: {
|
|
39
|
-
trigger
|
|
40
|
-
},
|
|
41
|
-
props: {
|
|
42
|
-
modelValue: {
|
|
43
|
-
type: [Number, String],
|
|
44
|
-
default: 0.2
|
|
45
|
-
},
|
|
46
|
-
mode: {
|
|
47
|
-
type: String,
|
|
48
|
-
default: 'horizontal' // horizontal, vertical
|
|
49
|
-
},
|
|
50
|
-
min: {
|
|
51
|
-
type: [Number, String],
|
|
52
|
-
default: 0
|
|
53
|
-
},
|
|
54
|
-
max: {
|
|
55
|
-
type: [Number, String],
|
|
56
|
-
default: 0.6
|
|
57
|
-
},
|
|
58
|
-
disabled: {
|
|
59
|
-
type: Boolean,
|
|
60
|
-
default: false
|
|
61
|
-
},
|
|
62
|
-
dividerText: {
|
|
63
|
-
type: String,
|
|
64
|
-
default: ''
|
|
65
|
-
},
|
|
66
|
-
loading: {
|
|
67
|
-
type: Boolean
|
|
68
|
-
},
|
|
69
|
-
loadingText: {
|
|
70
|
-
type: String,
|
|
71
|
-
default: ''
|
|
72
|
-
},
|
|
73
|
-
loadingType: {
|
|
74
|
-
type: String,
|
|
75
|
-
default: '2'
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
|
|
79
|
-
setup(props, context) {
|
|
80
|
-
const vm = getCurrentInstance()
|
|
81
|
-
const { $vUtils } = vm.proxy
|
|
82
|
-
const { emit, slots } = context
|
|
83
|
-
|
|
84
|
-
const splitRef = ref()
|
|
85
|
-
const offset = ref(0)
|
|
86
|
-
const initOffset = ref(0)
|
|
87
|
-
const oldOffset = ref(0)
|
|
88
|
-
const isMoving = ref(false)
|
|
89
|
-
const computedMin = ref(0)
|
|
90
|
-
const computedMax = ref(0)
|
|
91
|
-
const currentValue = ref(props.modelValue)
|
|
92
|
-
|
|
93
|
-
const paneClasses = computed(() => {
|
|
94
|
-
return {
|
|
95
|
-
'sh-split-pane': true,
|
|
96
|
-
'sh-split-pane-moving': props.isMoving
|
|
97
|
-
}
|
|
98
|
-
})
|
|
99
|
-
const isHorizontal = computed(() => {
|
|
100
|
-
return props.mode === 'horizontal'
|
|
101
|
-
})
|
|
102
|
-
const anotherOffset = computed(() => {
|
|
103
|
-
return 100 - offset.value
|
|
104
|
-
})
|
|
105
|
-
const valueIsPx = computed(() => {
|
|
106
|
-
return typeof props.modelValue === 'string'
|
|
107
|
-
})
|
|
108
|
-
const offsetSize = computed(() => {
|
|
109
|
-
return isHorizontal.value ? 'offsetWidth' : 'offsetHeight'
|
|
110
|
-
})
|
|
111
|
-
|
|
112
|
-
const px2percent = (numerator, denominator) => {
|
|
113
|
-
return parseFloat(numerator) / parseFloat(denominator)
|
|
114
|
-
}
|
|
115
|
-
const getComputedThresholdValue = type => {
|
|
116
|
-
let size = splitRef.value[offsetSize.value]
|
|
117
|
-
if (valueIsPx.value) return typeof props[type] === 'string' ? props[type] : size * props[type]
|
|
118
|
-
else return typeof props[type] === 'string' ? px2percent(props[type], size) : props[type]
|
|
119
|
-
}
|
|
120
|
-
const getMin = (value1, value2) => {
|
|
121
|
-
if (valueIsPx.value) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
|
|
122
|
-
else return Math.min(value1, value2)
|
|
123
|
-
}
|
|
124
|
-
const getMax = (value1, value2) => {
|
|
125
|
-
if (valueIsPx.value) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
|
|
126
|
-
else return Math.max(value1, value2)
|
|
127
|
-
}
|
|
128
|
-
const getAnotherOffset = value => {
|
|
129
|
-
let res = 0
|
|
130
|
-
if (valueIsPx.value) res = `${splitRef.value[offsetSize.value] - parseFloat(value)}px`
|
|
131
|
-
else res = 1 - value
|
|
132
|
-
return res
|
|
133
|
-
}
|
|
134
|
-
const handleMove = e => {
|
|
135
|
-
let pageOffset = isHorizontal.value ? e.pageX : e.pageY
|
|
136
|
-
let offset = pageOffset - initOffset.value
|
|
137
|
-
let outerWidth = splitRef.value[offsetSize.value]
|
|
138
|
-
let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + offset}px` : px2percent(outerWidth * oldOffset.value + offset, outerWidth)
|
|
139
|
-
let anotherValue = getAnotherOffset(value)
|
|
140
|
-
if (parseFloat(value) <= parseFloat(computedMin.value)) value =
|
|
141
|
-
if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) value = getAnotherOffset(getMax(anotherValue, computedMax.value))
|
|
142
|
-
e.atMin = currentValue.value === computedMin.value
|
|
143
|
-
e.atMax = valueIsPx.value ? getAnotherOffset(currentValue.value) === computedMax.value : getAnotherOffset(currentValue.value).toFixed(5) === computedMax.value.toFixed(5)
|
|
144
|
-
emitValue(value)
|
|
145
|
-
emit('moveing', e)
|
|
146
|
-
}
|
|
147
|
-
const handleUp = () => {
|
|
148
|
-
isMoving.value = false
|
|
149
|
-
$vUtils.offListener(document, 'mousemove', handleMove)
|
|
150
|
-
$vUtils.offListener(document, 'mouseup', handleUp)
|
|
151
|
-
emit('move-end')
|
|
152
|
-
}
|
|
153
|
-
const handleMousedown = e => {
|
|
154
|
-
initOffset.value = isHorizontal.value ? e.pageX : e.pageY
|
|
155
|
-
oldOffset.value = currentValue.value
|
|
156
|
-
isMoving.value = true
|
|
157
|
-
$vUtils.onListener(document, 'mousemove', handleMove)
|
|
158
|
-
$vUtils.onListener(document, 'mouseup', handleUp)
|
|
159
|
-
emit('move-start')
|
|
160
|
-
}
|
|
161
|
-
const computeOffset = () => {
|
|
162
|
-
computedMin.value = getComputedThresholdValue('min')
|
|
163
|
-
computedMax.value = getComputedThresholdValue('max')
|
|
164
|
-
offset.value = ((valueIsPx.value ? px2percent(currentValue.value, splitRef.value[offsetSize.value]) : currentValue.value) * 10000) / 100
|
|
165
|
-
// return nextTick()
|
|
166
|
-
}
|
|
167
|
-
const resetOffset = val => {
|
|
168
|
-
if (val !== currentValue.value) {
|
|
169
|
-
currentValue.value = val
|
|
170
|
-
computeOffset()
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
const emitValue = value => {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
watch(
|
|
179
|
-
() => props.modelValue,
|
|
180
|
-
val => {
|
|
181
|
-
resetOffset(val)
|
|
182
|
-
}
|
|
183
|
-
)
|
|
184
|
-
|
|
185
|
-
return {
|
|
186
|
-
splitRef,
|
|
187
|
-
isMoving,
|
|
188
|
-
isHorizontal,
|
|
189
|
-
anotherOffset,
|
|
190
|
-
paneClasses,
|
|
191
|
-
offset,
|
|
192
|
-
computeOffset,
|
|
193
|
-
handleMousedown
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
})
|
|
197
|
-
</script>
|
|
198
|
-
|
|
199
|
-
<style lang="scss">
|
|
200
|
-
$box-shadow: var(--box-shadow);
|
|
201
|
-
$trigger-bar-background: rgba(23, 35, 61, 0.25);
|
|
202
|
-
$trigger-background: #f8f8f9;
|
|
203
|
-
$trigger-width: 6px;
|
|
204
|
-
$trigger-bar-width: 4px;
|
|
205
|
-
$trigger-bar-offset: ($trigger-width - $trigger-bar-width) / 2;
|
|
206
|
-
$trigger-bar-interval: 3px;
|
|
207
|
-
$trigger-bar-weight: 1px;
|
|
208
|
-
$trigger-bar-con-height: ($trigger-bar-weight + $trigger-bar-interval) * 8;
|
|
209
|
-
|
|
210
|
-
.sh-split {
|
|
211
|
-
position: relative;
|
|
212
|
-
width: 100%;
|
|
213
|
-
height: 100%;
|
|
214
|
-
.layout-loader {
|
|
215
|
-
position: absolute;
|
|
216
|
-
top: 0;
|
|
217
|
-
left: 0;
|
|
218
|
-
width: 100%;
|
|
219
|
-
height: 100%;
|
|
220
|
-
background: rgba(0, 0, 0, 0.4);
|
|
221
|
-
transition: opacity 0.65s;
|
|
222
|
-
display: flex;
|
|
223
|
-
align-items: center;
|
|
224
|
-
justify-content: center;
|
|
225
|
-
flex-wrap: wrap;
|
|
226
|
-
font-size: 15px;
|
|
227
|
-
color: #fff;
|
|
228
|
-
z-index: 100;
|
|
229
|
-
}
|
|
230
|
-
&-pane {
|
|
231
|
-
position: absolute;
|
|
232
|
-
overflow: auto;
|
|
233
|
-
&.left-pane,
|
|
234
|
-
&.right-pane {
|
|
235
|
-
top: 0;
|
|
236
|
-
bottom: 0;
|
|
237
|
-
}
|
|
238
|
-
&.left-pane {
|
|
239
|
-
left: 0;
|
|
240
|
-
margin-right: $trigger-bar-width;
|
|
241
|
-
}
|
|
242
|
-
&.right-pane {
|
|
243
|
-
right: 0;
|
|
244
|
-
margin-left: $trigger-bar-width;
|
|
245
|
-
}
|
|
246
|
-
&.top-pane,
|
|
247
|
-
&.bottom-pane {
|
|
248
|
-
left: 0;
|
|
249
|
-
right: 0;
|
|
250
|
-
}
|
|
251
|
-
&.top-pane {
|
|
252
|
-
top: 0;
|
|
253
|
-
margin-bottom: $trigger-bar-width;
|
|
254
|
-
}
|
|
255
|
-
&.bottom-pane {
|
|
256
|
-
bottom: 0;
|
|
257
|
-
margin-top: $trigger-bar-width;
|
|
258
|
-
}
|
|
259
|
-
&-moving {
|
|
260
|
-
-webkit-user-select: none;
|
|
261
|
-
-moz-user-select: none;
|
|
262
|
-
-ms-user-select: none;
|
|
263
|
-
user-select: none;
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
&-trigger {
|
|
267
|
-
border: 1px solid var(--vxe-border-radius);
|
|
268
|
-
&-con {
|
|
269
|
-
position: absolute;
|
|
270
|
-
transform: translate(-50%, -50%);
|
|
271
|
-
z-index: 10;
|
|
272
|
-
}
|
|
273
|
-
&-bar-con {
|
|
274
|
-
position: absolute;
|
|
275
|
-
overflow: hidden;
|
|
276
|
-
&.vertical {
|
|
277
|
-
left: $trigger-bar-offset;
|
|
278
|
-
top: 50%;
|
|
279
|
-
height: $trigger-bar-con-height;
|
|
280
|
-
transform: translate(0, -50%);
|
|
281
|
-
}
|
|
282
|
-
&.horizontal {
|
|
283
|
-
left: 50%;
|
|
284
|
-
top: $trigger-bar-offset;
|
|
285
|
-
width: $trigger-bar-con-height;
|
|
286
|
-
transform: translate(-50%, 0);
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
&-vertical {
|
|
290
|
-
width: $trigger-width;
|
|
291
|
-
height: 100%;
|
|
292
|
-
background: $trigger-background;
|
|
293
|
-
border-top: none;
|
|
294
|
-
border-bottom: none;
|
|
295
|
-
cursor: col-resize;
|
|
296
|
-
.sh-split-trigger-bar {
|
|
297
|
-
width: $trigger-bar-width;
|
|
298
|
-
height: 1px;
|
|
299
|
-
background: $trigger-bar-background;
|
|
300
|
-
float: left;
|
|
301
|
-
margin-top: $trigger-bar-interval;
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
&-horizontal {
|
|
305
|
-
height: $trigger-width;
|
|
306
|
-
width: 100%;
|
|
307
|
-
background: $trigger-background;
|
|
308
|
-
border-left: none;
|
|
309
|
-
border-right: none;
|
|
310
|
-
cursor: row-resize;
|
|
311
|
-
.sh-split-trigger-bar {
|
|
312
|
-
height: $trigger-bar-width;
|
|
313
|
-
width: 1px;
|
|
314
|
-
background: $trigger-bar-background;
|
|
315
|
-
float: left;
|
|
316
|
-
margin-right: $trigger-bar-interval;
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
&-horizontal {
|
|
321
|
-
> .sh-split-trigger-con {
|
|
322
|
-
top: 50%;
|
|
323
|
-
height: 100%;
|
|
324
|
-
width: $trigger-width;
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
&-vertical {
|
|
328
|
-
> .sh-split-trigger-con {
|
|
329
|
-
left: 50%;
|
|
330
|
-
height: $trigger-width;
|
|
331
|
-
width: 100%;
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
.no-select {
|
|
335
|
-
-webkit-touch-callout: none;
|
|
336
|
-
-webkit-user-select: none;
|
|
337
|
-
-moz-user-select: none;
|
|
338
|
-
-ms-user-select: none;
|
|
339
|
-
user-select: none;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div ref="splitRef" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
|
|
3
|
+
<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
|
|
4
|
+
<div v-if="isHorizontal" class="sh-split-horizontal">
|
|
5
|
+
<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
|
|
6
|
+
<slot name="left" />
|
|
7
|
+
</div>
|
|
8
|
+
<div class="sh-split-trigger-con" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
|
|
9
|
+
<slot name="trigger">
|
|
10
|
+
<trigger mode="vertical" />
|
|
11
|
+
</slot>
|
|
12
|
+
</div>
|
|
13
|
+
<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
|
|
14
|
+
<slot name="right" />
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div v-else class="sh-split-vertical">
|
|
18
|
+
<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
|
|
19
|
+
<slot name="top" />
|
|
20
|
+
</div>
|
|
21
|
+
<div class="sh-split-trigger-con" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
|
|
22
|
+
<slot name="trigger">
|
|
23
|
+
<trigger mode="horizontal" />
|
|
24
|
+
</slot>
|
|
25
|
+
</div>
|
|
26
|
+
<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
|
|
27
|
+
<slot name="bottom" />
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script>
|
|
34
|
+
import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, nextTick } from 'vue'
|
|
35
|
+
import trigger from './components/trigger.vue'
|
|
36
|
+
export default defineComponent({
|
|
37
|
+
name: 'ShSplit',
|
|
38
|
+
components: {
|
|
39
|
+
trigger
|
|
40
|
+
},
|
|
41
|
+
props: {
|
|
42
|
+
modelValue: {
|
|
43
|
+
type: [Number, String],
|
|
44
|
+
default: 0.2
|
|
45
|
+
},
|
|
46
|
+
mode: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: 'horizontal' // horizontal, vertical
|
|
49
|
+
},
|
|
50
|
+
min: {
|
|
51
|
+
type: [Number, String],
|
|
52
|
+
default: 0
|
|
53
|
+
},
|
|
54
|
+
max: {
|
|
55
|
+
type: [Number, String],
|
|
56
|
+
default: 0.6
|
|
57
|
+
},
|
|
58
|
+
disabled: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
default: false
|
|
61
|
+
},
|
|
62
|
+
dividerText: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: ''
|
|
65
|
+
},
|
|
66
|
+
loading: {
|
|
67
|
+
type: Boolean
|
|
68
|
+
},
|
|
69
|
+
loadingText: {
|
|
70
|
+
type: String,
|
|
71
|
+
default: ''
|
|
72
|
+
},
|
|
73
|
+
loadingType: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: '2'
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
|
|
79
|
+
setup(props, context) {
|
|
80
|
+
const vm = getCurrentInstance()
|
|
81
|
+
const { $vUtils } = vm.proxy
|
|
82
|
+
const { emit, slots } = context
|
|
83
|
+
|
|
84
|
+
const splitRef = ref()
|
|
85
|
+
const offset = ref(0)
|
|
86
|
+
const initOffset = ref(0)
|
|
87
|
+
const oldOffset = ref(0)
|
|
88
|
+
const isMoving = ref(false)
|
|
89
|
+
const computedMin = ref(0)
|
|
90
|
+
const computedMax = ref(0)
|
|
91
|
+
const currentValue = ref(props.modelValue)
|
|
92
|
+
|
|
93
|
+
const paneClasses = computed(() => {
|
|
94
|
+
return {
|
|
95
|
+
'sh-split-pane': true,
|
|
96
|
+
'sh-split-pane-moving': props.isMoving
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
const isHorizontal = computed(() => {
|
|
100
|
+
return props.mode === 'horizontal'
|
|
101
|
+
})
|
|
102
|
+
const anotherOffset = computed(() => {
|
|
103
|
+
return 100 - offset.value
|
|
104
|
+
})
|
|
105
|
+
const valueIsPx = computed(() => {
|
|
106
|
+
return typeof props.modelValue === 'string'
|
|
107
|
+
})
|
|
108
|
+
const offsetSize = computed(() => {
|
|
109
|
+
return isHorizontal.value ? 'offsetWidth' : 'offsetHeight'
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
const px2percent = (numerator, denominator) => {
|
|
113
|
+
return parseFloat(numerator) / parseFloat(denominator)
|
|
114
|
+
}
|
|
115
|
+
const getComputedThresholdValue = type => {
|
|
116
|
+
let size = splitRef.value[offsetSize.value]
|
|
117
|
+
if (valueIsPx.value) return typeof props[type] === 'string' ? props[type] : size * props[type]
|
|
118
|
+
else return typeof props[type] === 'string' ? px2percent(props[type], size) : props[type]
|
|
119
|
+
}
|
|
120
|
+
const getMin = (value1, value2) => {
|
|
121
|
+
if (valueIsPx.value) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
|
|
122
|
+
else return Math.min(value1, value2)
|
|
123
|
+
}
|
|
124
|
+
const getMax = (value1, value2) => {
|
|
125
|
+
if (valueIsPx.value) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
|
|
126
|
+
else return Math.max(value1, value2)
|
|
127
|
+
}
|
|
128
|
+
const getAnotherOffset = value => {
|
|
129
|
+
let res = 0
|
|
130
|
+
if (valueIsPx.value) res = `${splitRef.value[offsetSize.value] - parseFloat(value)}px`
|
|
131
|
+
else res = 1 - value
|
|
132
|
+
return res
|
|
133
|
+
}
|
|
134
|
+
const handleMove = e => {
|
|
135
|
+
let pageOffset = isHorizontal.value ? e.pageX : e.pageY
|
|
136
|
+
let offset = pageOffset - initOffset.value
|
|
137
|
+
let outerWidth = splitRef.value[offsetSize.value]
|
|
138
|
+
let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + offset}px` : px2percent(outerWidth * oldOffset.value + offset, outerWidth)
|
|
139
|
+
let anotherValue = getAnotherOffset(value)
|
|
140
|
+
if (parseFloat(value) <= parseFloat(computedMin.value)) value = computedMin.value
|
|
141
|
+
if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) value = getAnotherOffset(getMax(anotherValue, computedMax.value))
|
|
142
|
+
e.atMin = currentValue.value === computedMin.value
|
|
143
|
+
e.atMax = valueIsPx.value ? getAnotherOffset(currentValue.value) === computedMax.value : getAnotherOffset(currentValue.value).toFixed(5) === computedMax.value.toFixed(5)
|
|
144
|
+
emitValue(value)
|
|
145
|
+
emit('moveing', e)
|
|
146
|
+
}
|
|
147
|
+
const handleUp = () => {
|
|
148
|
+
isMoving.value = false
|
|
149
|
+
$vUtils.offListener(document, 'mousemove', handleMove)
|
|
150
|
+
$vUtils.offListener(document, 'mouseup', handleUp)
|
|
151
|
+
emit('move-end')
|
|
152
|
+
}
|
|
153
|
+
const handleMousedown = e => {
|
|
154
|
+
initOffset.value = isHorizontal.value ? e.pageX : e.pageY
|
|
155
|
+
oldOffset.value = currentValue.value
|
|
156
|
+
isMoving.value = true
|
|
157
|
+
$vUtils.onListener(document, 'mousemove', handleMove)
|
|
158
|
+
$vUtils.onListener(document, 'mouseup', handleUp)
|
|
159
|
+
emit('move-start')
|
|
160
|
+
}
|
|
161
|
+
const computeOffset = () => {
|
|
162
|
+
computedMin.value = getComputedThresholdValue('min')
|
|
163
|
+
computedMax.value = getComputedThresholdValue('max')
|
|
164
|
+
offset.value = ((valueIsPx.value ? px2percent(currentValue.value, splitRef.value[offsetSize.value]) : currentValue.value) * 10000) / 100
|
|
165
|
+
// return nextTick()
|
|
166
|
+
}
|
|
167
|
+
const resetOffset = val => {
|
|
168
|
+
if (val !== currentValue.value) {
|
|
169
|
+
currentValue.value = val
|
|
170
|
+
computeOffset()
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
const emitValue = value => {
|
|
174
|
+
emit('update:modelValue', value)
|
|
175
|
+
resetOffset(value)
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
watch(
|
|
179
|
+
() => props.modelValue,
|
|
180
|
+
val => {
|
|
181
|
+
resetOffset(val)
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
|
|
185
|
+
return {
|
|
186
|
+
splitRef,
|
|
187
|
+
isMoving,
|
|
188
|
+
isHorizontal,
|
|
189
|
+
anotherOffset,
|
|
190
|
+
paneClasses,
|
|
191
|
+
offset,
|
|
192
|
+
computeOffset,
|
|
193
|
+
handleMousedown
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
})
|
|
197
|
+
</script>
|
|
198
|
+
|
|
199
|
+
<style lang="scss">
|
|
200
|
+
$box-shadow: var(--box-shadow);
|
|
201
|
+
$trigger-bar-background: rgba(23, 35, 61, 0.25);
|
|
202
|
+
$trigger-background: #f8f8f9;
|
|
203
|
+
$trigger-width: 6px;
|
|
204
|
+
$trigger-bar-width: 4px;
|
|
205
|
+
$trigger-bar-offset: ($trigger-width - $trigger-bar-width) / 2;
|
|
206
|
+
$trigger-bar-interval: 3px;
|
|
207
|
+
$trigger-bar-weight: 1px;
|
|
208
|
+
$trigger-bar-con-height: ($trigger-bar-weight + $trigger-bar-interval) * 8;
|
|
209
|
+
|
|
210
|
+
.sh-split {
|
|
211
|
+
position: relative;
|
|
212
|
+
width: 100%;
|
|
213
|
+
height: 100%;
|
|
214
|
+
.layout-loader {
|
|
215
|
+
position: absolute;
|
|
216
|
+
top: 0;
|
|
217
|
+
left: 0;
|
|
218
|
+
width: 100%;
|
|
219
|
+
height: 100%;
|
|
220
|
+
background: rgba(0, 0, 0, 0.4);
|
|
221
|
+
transition: opacity 0.65s;
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
flex-wrap: wrap;
|
|
226
|
+
font-size: 15px;
|
|
227
|
+
color: #fff;
|
|
228
|
+
z-index: 100;
|
|
229
|
+
}
|
|
230
|
+
&-pane {
|
|
231
|
+
position: absolute;
|
|
232
|
+
overflow: auto;
|
|
233
|
+
&.left-pane,
|
|
234
|
+
&.right-pane {
|
|
235
|
+
top: 0;
|
|
236
|
+
bottom: 0;
|
|
237
|
+
}
|
|
238
|
+
&.left-pane {
|
|
239
|
+
left: 0;
|
|
240
|
+
margin-right: $trigger-bar-width;
|
|
241
|
+
}
|
|
242
|
+
&.right-pane {
|
|
243
|
+
right: 0;
|
|
244
|
+
margin-left: $trigger-bar-width;
|
|
245
|
+
}
|
|
246
|
+
&.top-pane,
|
|
247
|
+
&.bottom-pane {
|
|
248
|
+
left: 0;
|
|
249
|
+
right: 0;
|
|
250
|
+
}
|
|
251
|
+
&.top-pane {
|
|
252
|
+
top: 0;
|
|
253
|
+
margin-bottom: $trigger-bar-width;
|
|
254
|
+
}
|
|
255
|
+
&.bottom-pane {
|
|
256
|
+
bottom: 0;
|
|
257
|
+
margin-top: $trigger-bar-width;
|
|
258
|
+
}
|
|
259
|
+
&-moving {
|
|
260
|
+
-webkit-user-select: none;
|
|
261
|
+
-moz-user-select: none;
|
|
262
|
+
-ms-user-select: none;
|
|
263
|
+
user-select: none;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
&-trigger {
|
|
267
|
+
border: 1px solid var(--vxe-border-radius);
|
|
268
|
+
&-con {
|
|
269
|
+
position: absolute;
|
|
270
|
+
transform: translate(-50%, -50%);
|
|
271
|
+
z-index: 10;
|
|
272
|
+
}
|
|
273
|
+
&-bar-con {
|
|
274
|
+
position: absolute;
|
|
275
|
+
overflow: hidden;
|
|
276
|
+
&.vertical {
|
|
277
|
+
left: $trigger-bar-offset;
|
|
278
|
+
top: 50%;
|
|
279
|
+
height: $trigger-bar-con-height;
|
|
280
|
+
transform: translate(0, -50%);
|
|
281
|
+
}
|
|
282
|
+
&.horizontal {
|
|
283
|
+
left: 50%;
|
|
284
|
+
top: $trigger-bar-offset;
|
|
285
|
+
width: $trigger-bar-con-height;
|
|
286
|
+
transform: translate(-50%, 0);
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
&-vertical {
|
|
290
|
+
width: $trigger-width;
|
|
291
|
+
height: 100%;
|
|
292
|
+
background: $trigger-background;
|
|
293
|
+
border-top: none;
|
|
294
|
+
border-bottom: none;
|
|
295
|
+
cursor: col-resize;
|
|
296
|
+
.sh-split-trigger-bar {
|
|
297
|
+
width: $trigger-bar-width;
|
|
298
|
+
height: 1px;
|
|
299
|
+
background: $trigger-bar-background;
|
|
300
|
+
float: left;
|
|
301
|
+
margin-top: $trigger-bar-interval;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
&-horizontal {
|
|
305
|
+
height: $trigger-width;
|
|
306
|
+
width: 100%;
|
|
307
|
+
background: $trigger-background;
|
|
308
|
+
border-left: none;
|
|
309
|
+
border-right: none;
|
|
310
|
+
cursor: row-resize;
|
|
311
|
+
.sh-split-trigger-bar {
|
|
312
|
+
height: $trigger-bar-width;
|
|
313
|
+
width: 1px;
|
|
314
|
+
background: $trigger-bar-background;
|
|
315
|
+
float: left;
|
|
316
|
+
margin-right: $trigger-bar-interval;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
&-horizontal {
|
|
321
|
+
> .sh-split-trigger-con {
|
|
322
|
+
top: 50%;
|
|
323
|
+
height: 100%;
|
|
324
|
+
width: $trigger-width;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
&-vertical {
|
|
328
|
+
> .sh-split-trigger-con {
|
|
329
|
+
left: 50%;
|
|
330
|
+
height: $trigger-width;
|
|
331
|
+
width: 100%;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
.no-select {
|
|
335
|
+
-webkit-touch-callout: none;
|
|
336
|
+
-webkit-user-select: none;
|
|
337
|
+
-moz-user-select: none;
|
|
338
|
+
-ms-user-select: none;
|
|
339
|
+
user-select: none;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
</style>
|
|
@@ -7,8 +7,11 @@
|
|
|
7
7
|
<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
|
|
8
8
|
<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
|
|
9
9
|
<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
|
|
10
|
-
<div
|
|
11
|
-
|
|
10
|
+
<div
|
|
11
|
+
:class="{ 'sh-tab-item': true, 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab[labelKey] === activeKey }"
|
|
12
|
+
:style="getTabItemStyle(tab, tabIndex)"
|
|
13
|
+
@click="handleChange(tab)">
|
|
14
|
+
<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
|
|
12
15
|
<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
|
|
13
16
|
<div class="sh-tab-label">{{ tab[labelField] }}</div>
|
|
14
17
|
<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
|
|
@@ -25,7 +28,7 @@
|
|
|
25
28
|
<div ref="contentWrap" class="sh-tabs-content-wrap" :class="{ 'sh-tabs-content-animated': animated }" :style="contentStyle">
|
|
26
29
|
<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
|
|
27
30
|
<div class="sh-tabs-content-item">
|
|
28
|
-
<slot :name="tab
|
|
31
|
+
<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
|
|
29
32
|
</div>
|
|
30
33
|
</template>
|
|
31
34
|
</div>
|
|
@@ -51,6 +54,10 @@ export default defineComponent({
|
|
|
51
54
|
type: String,
|
|
52
55
|
default: 'label'
|
|
53
56
|
},
|
|
57
|
+
labelKey: {
|
|
58
|
+
type: String,
|
|
59
|
+
default: 'value'
|
|
60
|
+
},
|
|
54
61
|
type: {
|
|
55
62
|
type: String,
|
|
56
63
|
default: 'line' // 'line', 'card'
|
|
@@ -70,6 +77,10 @@ export default defineComponent({
|
|
|
70
77
|
isContent: {
|
|
71
78
|
type: Boolean,
|
|
72
79
|
default: true
|
|
80
|
+
},
|
|
81
|
+
gutter: {
|
|
82
|
+
type: Number,
|
|
83
|
+
default: 5
|
|
73
84
|
}
|
|
74
85
|
},
|
|
75
86
|
emits: ['update:modelValue', 'close', 'change'],
|
|
@@ -87,10 +98,10 @@ export default defineComponent({
|
|
|
87
98
|
const closedList = ref([])
|
|
88
99
|
const navStyle = ref({ transform: '' })
|
|
89
100
|
|
|
90
|
-
const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item.
|
|
91
|
-
const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab.
|
|
101
|
+
const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
|
|
102
|
+
const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab[props.labelKey])) || [])
|
|
92
103
|
const contentStyle = computed(() => {
|
|
93
|
-
const x = tabList.value.findIndex(tab => tab.
|
|
104
|
+
const x = tabList.value.findIndex(tab => tab[props.labelKey] === activeKey.value)
|
|
94
105
|
const p = x === 0 ? '0%' : `-${x}00%`
|
|
95
106
|
let style = {}
|
|
96
107
|
if (x > -1) {
|
|
@@ -123,6 +134,11 @@ export default defineComponent({
|
|
|
123
134
|
const getTabIsClosable = tab => {
|
|
124
135
|
return props.closable && !tab.disabled && !tab.unClosed
|
|
125
136
|
}
|
|
137
|
+
const getTabItemStyle = (tab, tabIndex) => {
|
|
138
|
+
return {
|
|
139
|
+
marginLeft: tabIndex ? `${props.gutter}px` : 0
|
|
140
|
+
}
|
|
141
|
+
}
|
|
126
142
|
const handleResize = e => {
|
|
127
143
|
const navWidth = navRef.value.offsetWidth
|
|
128
144
|
const containerWidth = navScrollRef.value.offsetWidth
|
|
@@ -154,19 +170,18 @@ export default defineComponent({
|
|
|
154
170
|
}
|
|
155
171
|
const handleChange = tab => {
|
|
156
172
|
if (!tab || tab.disabled) return
|
|
157
|
-
activeKey.value = tab.
|
|
173
|
+
activeKey.value = tab[props.labelKey]
|
|
158
174
|
emit('change', tab)
|
|
159
175
|
if (!scrollable.value) return
|
|
160
176
|
const navWidth = navRef.value.offsetWidth
|
|
161
177
|
const containerWidth = navScrollRef.value.offsetWidth
|
|
162
178
|
const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
|
|
163
|
-
const tabIndex = tabList.value.findIndex(tb => tb.
|
|
179
|
+
const tabIndex = tabList.value.findIndex(tb => tb[props.labelKey] === tab[props.labelKey])
|
|
164
180
|
let barOffset = 0
|
|
165
181
|
if (tabIndex > 0) {
|
|
166
|
-
const gutter = 5
|
|
167
182
|
let offset = 0
|
|
168
183
|
for (let i = 0; i < tabIndex; i++) {
|
|
169
|
-
offset += parseFloat(prevTabs[i].offsetWidth) + gutter
|
|
184
|
+
offset += parseFloat(prevTabs[i].offsetWidth) + props.gutter
|
|
170
185
|
}
|
|
171
186
|
barOffset = offset
|
|
172
187
|
}
|
|
@@ -174,10 +189,10 @@ export default defineComponent({
|
|
|
174
189
|
setOffset(navOffset)
|
|
175
190
|
}
|
|
176
191
|
const handleClose = tab => {
|
|
177
|
-
closedList.value.push(tab.
|
|
178
|
-
if (tab.
|
|
192
|
+
closedList.value.push(tab[props.labelKey])
|
|
193
|
+
if (tab[props.labelKey] === activeKey.value) {
|
|
179
194
|
let isNotDisabledList = tabList.value.filter(tab => !tab.disabled)
|
|
180
|
-
activeKey.value = isNotDisabledList.length ? isNotDisabledList[0].
|
|
195
|
+
activeKey.value = isNotDisabledList.length ? isNotDisabledList[0][props.labelKey] : ''
|
|
181
196
|
}
|
|
182
197
|
emit('close', tab)
|
|
183
198
|
}
|
|
@@ -219,7 +234,8 @@ export default defineComponent({
|
|
|
219
234
|
handleResize,
|
|
220
235
|
handleChange,
|
|
221
236
|
handleClose,
|
|
222
|
-
getTabIsClosable
|
|
237
|
+
getTabIsClosable,
|
|
238
|
+
getTabItemStyle
|
|
223
239
|
}
|
|
224
240
|
}
|
|
225
241
|
})
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { defineComponent, computed, getCurrentInstance } from 'vue'
|
|
3
3
|
import dataHook from '../js/data-hook'
|
|
4
4
|
import dataProps from '../js/data-props'
|
|
5
|
-
import Spreadsheet from 'x-data-spreadsheet'
|
|
5
|
+
// import Spreadsheet from 'x-data-spreadsheet'
|
|
6
6
|
import ExcelJS from 'exceljs'
|
|
7
7
|
export default defineComponent({
|
|
8
8
|
name: 'ShExcel',
|
|
@@ -149,10 +149,10 @@ export default defineComponent({
|
|
|
149
149
|
})
|
|
150
150
|
workbookData.push(sheetData)
|
|
151
151
|
})
|
|
152
|
-
return new Spreadsheet(rootRef.value, excelOptions).loadData(workbookData)
|
|
152
|
+
// return new Spreadsheet(rootRef.value, excelOptions).loadData(workbookData)
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
const useData = dataHook(props, context, {
|
|
155
|
+
const useData = dataHook(props, context, proxy, {
|
|
156
156
|
domRender
|
|
157
157
|
})
|
|
158
158
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { defineComponent, computed } from 'vue'
|
|
2
|
+
import { defineComponent, computed, getCurrentInstance } from 'vue'
|
|
3
3
|
import dataHook from '../js/data-hook'
|
|
4
4
|
import dataProps from '../js/data-props'
|
|
5
5
|
import { renderAsync } from 'docx-preview'
|
|
@@ -8,6 +8,8 @@ export default defineComponent({
|
|
|
8
8
|
props: dataProps,
|
|
9
9
|
emits: ['rendered', 'error'],
|
|
10
10
|
setup(props, context) {
|
|
11
|
+
const { proxy } = getCurrentInstance()
|
|
12
|
+
|
|
11
13
|
let defaultOption = {
|
|
12
14
|
inWrapper: true, //启用围绕文档内容呈现包装器
|
|
13
15
|
ignoreWidth: true, //禁用页面的渲染宽度
|
|
@@ -16,11 +18,16 @@ export default defineComponent({
|
|
|
16
18
|
breakPages: true, //在分页符上启用分页
|
|
17
19
|
ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
|
|
18
20
|
experimental: false, //启用实验功能（制表符停止计算）
|
|
19
|
-
trimXmlDeclaration:
|
|
21
|
+
trimXmlDeclaration: false, //如果为true，则在解析之前将从xml文档中删除xml声明
|
|
20
22
|
useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
|
|
21
23
|
useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
|
|
22
24
|
showChanges: false, //启用文档更改的实验渲染（插入/删除）
|
|
23
|
-
debug: false //启用额外的日志记录
|
|
25
|
+
debug: false, //启用额外的日志记录
|
|
26
|
+
renderHeaders: true,
|
|
27
|
+
renderFooters: true,
|
|
28
|
+
renderFootnotes: true,
|
|
29
|
+
renderEndnotes: true,
|
|
30
|
+
renderChanges: false
|
|
24
31
|
}
|
|
25
32
|
|
|
26
33
|
const docxOptions = computed(() => {
|
|
@@ -28,26 +35,26 @@ export default defineComponent({
|
|
|
28
35
|
})
|
|
29
36
|
|
|
30
37
|
const domRender = async (data, container) => {
|
|
31
|
-
if (!data) {
|
|
32
|
-
container.innerHTML =
|
|
33
|
-
return
|
|
38
|
+
if (!data || typeof data === 'string') {
|
|
39
|
+
container.innerHTML = data
|
|
40
|
+
return true
|
|
34
41
|
}
|
|
35
|
-
let blob
|
|
36
|
-
if (data instanceof
|
|
37
|
-
blob = data
|
|
38
|
-
} else if (data instanceof Response) {
|
|
39
|
-
blob = await data.blob()
|
|
42
|
+
let blob = data
|
|
43
|
+
if (data instanceof Response) {
|
|
44
|
+
blob = data.blob()
|
|
40
45
|
} else if (data instanceof ArrayBuffer) {
|
|
41
46
|
blob = new Blob([data])
|
|
42
47
|
}
|
|
43
48
|
return renderAsync(blob, container, null, docxOptions.value)
|
|
44
49
|
}
|
|
45
50
|
|
|
46
|
-
const useData = dataHook(props, context, {
|
|
51
|
+
const useData = dataHook(props, context, proxy, {
|
|
47
52
|
domRender
|
|
48
53
|
})
|
|
49
54
|
|
|
50
|
-
return
|
|
55
|
+
return {
|
|
56
|
+
...useData
|
|
57
|
+
}
|
|
51
58
|
}
|
|
52
59
|
})
|
|
53
60
|
</script>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { onMounted, ref, watch } from 'vue'
|
|
2
2
|
|
|
3
|
-
export default function (props, context, state) {
|
|
3
|
+
export default function (props, context, proxy, state) {
|
|
4
4
|
const rootRef = ref(null)
|
|
5
|
+
const { $vUtils, $http } = proxy
|
|
5
6
|
const { emit } = context
|
|
6
7
|
|
|
7
8
|
const initData = async () => {
|
|
@@ -11,11 +12,14 @@ export default function (props, context, state) {
|
|
|
11
12
|
let fileRes = props.src
|
|
12
13
|
if (typeof props.src === 'string') {
|
|
13
14
|
fileRes = await fetch(props.src, props.serverConfig)
|
|
15
|
+
if (fileRes && fileRes.status !== 200) {
|
|
16
|
+
throw new Error(fileRes)
|
|
17
|
+
}
|
|
14
18
|
}
|
|
15
19
|
await state.domRender(fileRes, container)
|
|
16
20
|
emit('rendered')
|
|
17
21
|
} catch (e) {
|
|
18
|
-
await state.domRender(
|
|
22
|
+
await state.domRender(e.message, container)
|
|
19
23
|
emit('error', e)
|
|
20
24
|
}
|
|
21
25
|
}
|