sh-view 2.5.0 → 2.5.2
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
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
<div class="sh-drawer-body" :style="styles">
|
|
22
22
|
<slot v-if="modelValue || !destroyOnClose"></slot>
|
|
23
23
|
</div>
|
|
24
|
+
<div v-if="slots.footer" class="sh-drawer-footer">
|
|
25
|
+
<slot name="footer"></slot>
|
|
26
|
+
</div>
|
|
24
27
|
</div>
|
|
25
28
|
<div v-if="draggable && (placement === 'left' || placement === 'right')" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
|
|
26
29
|
<slot name="trigger">
|
|
@@ -337,6 +340,7 @@ export default defineComponent({
|
|
|
337
340
|
})
|
|
338
341
|
|
|
339
342
|
return {
|
|
343
|
+
slots,
|
|
340
344
|
visible,
|
|
341
345
|
handleMask,
|
|
342
346
|
wrapClasses,
|
|
@@ -422,9 +426,8 @@ export default defineComponent({
|
|
|
422
426
|
&-content {
|
|
423
427
|
width: 100%;
|
|
424
428
|
height: 100%;
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
bottom: 0;
|
|
429
|
+
display: flex;
|
|
430
|
+
flex-direction: column;
|
|
428
431
|
background-color: var(--vxe-table-body-background-color);
|
|
429
432
|
border: 0;
|
|
430
433
|
background-clip: padding-box;
|
|
@@ -463,16 +466,19 @@ export default defineComponent({
|
|
|
463
466
|
}
|
|
464
467
|
&-body {
|
|
465
468
|
width: 100%;
|
|
466
|
-
|
|
469
|
+
flex: 1;
|
|
467
470
|
padding: 16px;
|
|
468
471
|
font-size: var(--vxe-font-size);
|
|
469
472
|
line-height: 1.5;
|
|
470
473
|
word-wrap: break-word;
|
|
471
|
-
position:
|
|
474
|
+
position: relative;
|
|
472
475
|
overflow: auto;
|
|
473
476
|
}
|
|
474
|
-
&-
|
|
475
|
-
|
|
477
|
+
&-footer {
|
|
478
|
+
position: relative;
|
|
479
|
+
border-top: 1px solid var(--vxe-table-border-color);
|
|
480
|
+
padding: 14px 16px;
|
|
481
|
+
line-height: 1;
|
|
476
482
|
}
|
|
477
483
|
&-no-mask {
|
|
478
484
|
pointer-events: none;
|
|
@@ -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
|
})
|