mediacube-ui 0.1.62 → 0.1.63
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,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="mc-stack" ref="stack">
|
|
3
|
-
<div class="mc-stack__body" ref="body">
|
|
3
|
+
<div v-show="loaded" class="mc-stack__body" ref="body">
|
|
4
4
|
<slot />
|
|
5
5
|
</div>
|
|
6
6
|
<div v-if="more" class="mc-stack__counter" ref="counter">
|
|
@@ -31,6 +31,7 @@ export default {
|
|
|
31
31
|
data: () => ({
|
|
32
32
|
children: null,
|
|
33
33
|
more: 0,
|
|
34
|
+
loaded: false,
|
|
34
35
|
custom_limit: 0,
|
|
35
36
|
}),
|
|
36
37
|
computed: {
|
|
@@ -56,14 +57,15 @@ export default {
|
|
|
56
57
|
methods: {
|
|
57
58
|
init() {
|
|
58
59
|
if (this.isAutoLimit) {
|
|
59
|
-
this.calcLimit()
|
|
60
60
|
window.addEventListener('resize', this.calcLimit)
|
|
61
|
+
// setTimeout из-за случаев, когда элемент рендерится с 0 шириной, а потом она устанавливается динамически
|
|
62
|
+
setTimeout(() => this.calcLimit(), 1)
|
|
61
63
|
} else {
|
|
62
64
|
this.toggleChilds(true, this.limit)
|
|
63
65
|
}
|
|
64
66
|
},
|
|
65
|
-
calcLimit() {
|
|
66
|
-
this.toggleChilds()
|
|
67
|
+
calcLimit(showAll, limit) {
|
|
68
|
+
if(showAll) this.toggleChilds()
|
|
67
69
|
this.custom_limit = Infinity
|
|
68
70
|
let childWidth = 0
|
|
69
71
|
// ширина родителя без учета счетчика
|
|
@@ -77,7 +79,8 @@ export default {
|
|
|
77
79
|
break
|
|
78
80
|
}
|
|
79
81
|
}
|
|
80
|
-
|
|
82
|
+
// Сравниваем переданный лимит с заново выставленным, если они не равны, то ререндерим потомков
|
|
83
|
+
if (this.custom_limit !== limit) this.toggleChilds(true, this.custom_limit)
|
|
81
84
|
},
|
|
82
85
|
setStyles(elem, opacity = 1, visibility = 'visible', position = 'initial') {
|
|
83
86
|
elem.style.opacity = opacity
|
|
@@ -85,6 +88,7 @@ export default {
|
|
|
85
88
|
elem.style.position = position
|
|
86
89
|
},
|
|
87
90
|
toggleChilds(hide, limit = 0) {
|
|
91
|
+
this.loaded = true
|
|
88
92
|
this.more = 0
|
|
89
93
|
this.children = this.$refs.body.children
|
|
90
94
|
let elementsLimit = hide ? (limit - 1) : this.children.length
|
|
@@ -95,6 +99,8 @@ export default {
|
|
|
95
99
|
this.more++
|
|
96
100
|
}
|
|
97
101
|
}
|
|
102
|
+
// Передаем в $nextTick лимит для пересчета, т.к. рендерится counter, который занимает доп место и обрезает элементы
|
|
103
|
+
if (hide && this.isAutoLimit) this.$nextTick(() => this.calcLimit(false, limit))
|
|
98
104
|
},
|
|
99
105
|
},
|
|
100
106
|
}
|