unika-components 1.0.249 → 1.0.251
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.
|
@@ -4,25 +4,24 @@ import 'swiper/swiper-bundle.css';
|
|
|
4
4
|
declare const _default: import("vue").DefineComponent<{
|
|
5
5
|
work: {
|
|
6
6
|
type: PropType<WorkData>;
|
|
7
|
-
|
|
7
|
+
required: true;
|
|
8
8
|
};
|
|
9
9
|
components: {
|
|
10
10
|
type: PropType<ComponentData[]>;
|
|
11
11
|
};
|
|
12
12
|
}, {
|
|
13
13
|
componentRefs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
|
|
14
|
-
setComponentRef: (el:
|
|
14
|
+
setComponentRef: (el: HTMLElement | null) => void;
|
|
15
15
|
onSlideChange: (swiper: any) => void;
|
|
16
16
|
onSwiper: (swiper: any) => void;
|
|
17
17
|
modules: import("swiper/types").SwiperComponent[];
|
|
18
18
|
direction: string;
|
|
19
19
|
upArrow: import("vue").Ref<boolean>;
|
|
20
|
-
slideChangeTransitionEnd: (e: any) => void;
|
|
21
20
|
slideClasses: (index: number) => string[];
|
|
22
21
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
23
22
|
work: {
|
|
24
23
|
type: PropType<WorkData>;
|
|
25
|
-
|
|
24
|
+
required: true;
|
|
26
25
|
};
|
|
27
26
|
components: {
|
|
28
27
|
type: PropType<ComponentData[]>;
|
|
@@ -1,16 +1,44 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
button.uni-text-component {
|
|
6
|
-
padding: 5px 10px;
|
|
7
|
-
cursor: pointer;
|
|
2
|
+
.uni-image-component {
|
|
3
|
+
max-width: 100%;
|
|
8
4
|
}
|
|
9
|
-
.uni-
|
|
10
|
-
|
|
11
|
-
white-space: pre-wrap;
|
|
5
|
+
.uni-image-mask-wrapper {
|
|
6
|
+
display: inline-block;
|
|
12
7
|
}
|
|
13
8
|
|
|
9
|
+
.uni-video-component {
|
|
10
|
+
position: relative;
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
.play-pause-button {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: 50%;
|
|
16
|
+
left: 50%;
|
|
17
|
+
transform: translate(-50%, -50%);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
font-size: 2rem;
|
|
20
|
+
color: #fff;
|
|
21
|
+
background: rgba(0, 0, 0, 0.6);
|
|
22
|
+
border-radius: 50%;
|
|
23
|
+
padding: 10px;
|
|
24
|
+
transition: background 0.3s;
|
|
25
|
+
}
|
|
26
|
+
.play-pause-button:hover {
|
|
27
|
+
background: rgba(0, 0, 0, 0.8);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
.uni-calendar-component {
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
.slot-number {
|
|
35
|
+
position: absolute;
|
|
36
|
+
bottom: 2px;
|
|
37
|
+
left: 7px;
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
color: #666
|
|
40
|
+
}
|
|
41
|
+
|
|
14
42
|
.like-button {
|
|
15
43
|
display: flex;
|
|
16
44
|
flex-direction: column;
|
|
@@ -32,125 +60,12 @@ button.uni-text-component {
|
|
|
32
60
|
font-size: 16px;
|
|
33
61
|
color: #333;
|
|
34
62
|
}
|
|
35
|
-
|
|
36
|
-
.slide-guide {
|
|
37
|
-
position: absolute;
|
|
38
|
-
bottom: 90px;
|
|
39
|
-
left: 50%;
|
|
40
|
-
transform: translateX(-50%);
|
|
41
|
-
}
|
|
42
|
-
.slide-guide img {
|
|
43
|
-
animation: flowing 2s ease-in-out infinite;
|
|
44
|
-
width: 33px;
|
|
45
|
-
vertical-align: middle;
|
|
46
|
-
border-style: none;
|
|
47
|
-
}
|
|
48
|
-
body, html {
|
|
49
|
-
position: relative;
|
|
50
|
-
width: 100%;
|
|
51
|
-
height: 100%;
|
|
52
|
-
margin: 0px;
|
|
53
|
-
}
|
|
54
|
-
.swiper-container {
|
|
55
|
-
width: 100%;
|
|
56
|
-
height: 100%;
|
|
57
|
-
}
|
|
58
|
-
.swiper-slide {
|
|
59
|
-
width: 100%;
|
|
60
|
-
height: 100%;
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
background-size: cover;
|
|
63
|
-
background-position: center;
|
|
64
|
-
background-repeat: no-repeat;
|
|
65
|
-
}
|
|
66
|
-
.up-arrow {
|
|
67
|
-
width: 2rem;
|
|
68
|
-
height: 2rem;
|
|
69
|
-
position: fixed;
|
|
70
|
-
bottom: 2rem;
|
|
71
|
-
left: 50%;
|
|
72
|
-
transform: translate3d(-50%, 0, 0);
|
|
73
|
-
z-index: 999;
|
|
74
|
-
background: none;
|
|
75
|
-
border: none;
|
|
76
|
-
padding: 0;
|
|
77
|
-
animation: upArrowAni 2s infinite linear;
|
|
78
|
-
}
|
|
79
|
-
.up-arrow img {
|
|
80
|
-
width: 2rem;
|
|
81
|
-
height: 2rem;
|
|
82
|
-
text-align: center;
|
|
83
|
-
line-height: 2rem;
|
|
84
|
-
color: #fff;
|
|
85
|
-
font-size: 1.5rem;
|
|
86
|
-
}
|
|
87
|
-
@keyframes upArrowAni {
|
|
88
|
-
0% {
|
|
89
|
-
opacity: 0;
|
|
90
|
-
transform: translate3d(-50%, 30%, 0);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
30% {
|
|
94
|
-
opacity: 1;
|
|
95
|
-
transform: translate3d(-50%, -20%, 0);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
60% {
|
|
99
|
-
opacity: 0;
|
|
100
|
-
transform: translate3d(-50%, -35%, 0);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
100% {
|
|
104
|
-
opacity: 0;
|
|
105
|
-
transform: translate3d(-50%, -50%, 0);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.uni-image-component {
|
|
110
|
-
max-width: 100%;
|
|
111
|
-
}
|
|
112
|
-
.uni-image-mask-wrapper {
|
|
113
|
-
display: inline-block;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
.uni-calendar-component {
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
.slot-number {
|
|
121
|
-
position: absolute;
|
|
122
|
-
bottom: 2px;
|
|
123
|
-
left: 7px;
|
|
124
|
-
font-size: 12px;
|
|
125
|
-
color: #666
|
|
126
|
-
}
|
|
127
63
|
|
|
128
64
|
.effect {
|
|
129
65
|
width: 100%;
|
|
130
66
|
height: 100%;
|
|
131
67
|
}
|
|
132
68
|
|
|
133
|
-
.uni-video-component {
|
|
134
|
-
position: relative;
|
|
135
|
-
text-align: center;
|
|
136
|
-
}
|
|
137
|
-
.play-pause-button {
|
|
138
|
-
position: absolute;
|
|
139
|
-
top: 50%;
|
|
140
|
-
left: 50%;
|
|
141
|
-
transform: translate(-50%, -50%);
|
|
142
|
-
cursor: pointer;
|
|
143
|
-
font-size: 2rem;
|
|
144
|
-
color: #fff;
|
|
145
|
-
background: rgba(0, 0, 0, 0.6);
|
|
146
|
-
border-radius: 50%;
|
|
147
|
-
padding: 10px;
|
|
148
|
-
transition: background 0.3s;
|
|
149
|
-
}
|
|
150
|
-
.play-pause-button:hover {
|
|
151
|
-
background: rgba(0, 0, 0, 0.8);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
69
|
.ant-input-number {
|
|
155
70
|
box-sizing: border-box;
|
|
156
71
|
margin: 0;
|
|
@@ -185,6 +100,88 @@ body, html {
|
|
|
185
100
|
margin-bottom: 0px;
|
|
186
101
|
vertical-align: top;
|
|
187
102
|
}
|
|
103
|
+
|
|
104
|
+
.slide-guide {
|
|
105
|
+
position: absolute;
|
|
106
|
+
bottom: 90px;
|
|
107
|
+
left: 50%;
|
|
108
|
+
transform: translateX(-50%);
|
|
109
|
+
}
|
|
110
|
+
.slide-guide img {
|
|
111
|
+
animation: flowing 2s ease-in-out infinite;
|
|
112
|
+
width: 33px;
|
|
113
|
+
vertical-align: middle;
|
|
114
|
+
border-style: none;
|
|
115
|
+
}
|
|
116
|
+
body, html {
|
|
117
|
+
position: relative;
|
|
118
|
+
width: 100%;
|
|
119
|
+
height: 100%;
|
|
120
|
+
margin: 0px;
|
|
121
|
+
}
|
|
122
|
+
.swiper-container {
|
|
123
|
+
width: 100%;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
.swiper-slide {
|
|
127
|
+
width: 100%;
|
|
128
|
+
height: 100%;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
background-size: cover;
|
|
131
|
+
background-position: center;
|
|
132
|
+
background-repeat: no-repeat;
|
|
133
|
+
}
|
|
134
|
+
.up-arrow {
|
|
135
|
+
width: 2rem;
|
|
136
|
+
height: 2rem;
|
|
137
|
+
position: fixed;
|
|
138
|
+
bottom: 2rem;
|
|
139
|
+
left: 50%;
|
|
140
|
+
transform: translate3d(-50%, 0, 0);
|
|
141
|
+
z-index: 999;
|
|
142
|
+
background: none;
|
|
143
|
+
border: none;
|
|
144
|
+
padding: 0;
|
|
145
|
+
animation: upArrowAni 2s infinite linear;
|
|
146
|
+
}
|
|
147
|
+
.up-arrow img {
|
|
148
|
+
width: 2rem;
|
|
149
|
+
height: 2rem;
|
|
150
|
+
text-align: center;
|
|
151
|
+
line-height: 2rem;
|
|
152
|
+
color: #fff;
|
|
153
|
+
font-size: 1.5rem;
|
|
154
|
+
}
|
|
155
|
+
@keyframes upArrowAni {
|
|
156
|
+
0% {
|
|
157
|
+
opacity: 0;
|
|
158
|
+
transform: translate3d(-50%, 30%, 0);
|
|
159
|
+
}
|
|
160
|
+
30% {
|
|
161
|
+
opacity: 1;
|
|
162
|
+
transform: translate3d(-50%, -20%, 0);
|
|
163
|
+
}
|
|
164
|
+
60% {
|
|
165
|
+
opacity: 0;
|
|
166
|
+
transform: translate3d(-50%, -35%, 0);
|
|
167
|
+
}
|
|
168
|
+
100% {
|
|
169
|
+
opacity: 0;
|
|
170
|
+
transform: translate3d(-50%, -50%, 0);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
h2.uni-text-component, p.uni-text-component {
|
|
175
|
+
margin-bottom: 0;
|
|
176
|
+
}
|
|
177
|
+
button.uni-text-component {
|
|
178
|
+
padding: 5px 10px;
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
}
|
|
181
|
+
.uni-text-component {
|
|
182
|
+
box-sizing: border-box;
|
|
183
|
+
white-space: pre-wrap;
|
|
184
|
+
}
|
|
188
185
|
|
|
189
186
|
.swiper-warp {
|
|
190
187
|
width: 100%;
|
|
@@ -199,13 +196,18 @@ body, html {
|
|
|
199
196
|
max-width: 100%;
|
|
200
197
|
max-height: 100%;
|
|
201
198
|
}
|
|
202
|
-
|
|
203
|
-
.uni-build-up-component {
|
|
204
|
-
}
|
|
205
199
|
|
|
206
200
|
.uni-svg-component {
|
|
207
201
|
display: inline-block;
|
|
208
202
|
}
|
|
203
|
+
|
|
204
|
+
.uni-build-up-component {
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.uni-lotties-component {
|
|
208
|
+
width: 100%;
|
|
209
|
+
height: 100%;
|
|
210
|
+
}
|
|
209
211
|
/**
|
|
210
212
|
* Swiper 6.8.4
|
|
211
213
|
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
@@ -12995,161 +12995,66 @@ var SwiperSlide = {
|
|
|
12995
12995
|
}
|
|
12996
12996
|
};
|
|
12997
12997
|
|
|
12998
|
-
//隐藏元素
|
|
12999
|
-
const swiperAnimateCache = () => {
|
|
13000
|
-
const allBoxes = window.document.documentElement.querySelectorAll(".animation");
|
|
13001
|
-
for (let i = 0; i < allBoxes.length; i++) {
|
|
13002
|
-
allBoxes[i].attributes["style"]
|
|
13003
|
-
? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value)
|
|
13004
|
-
: allBoxes[i].setAttribute("swiper-animate-style-cache", " ");
|
|
13005
|
-
allBoxes[i].style.visibility = "hidden";
|
|
13006
|
-
}
|
|
13007
|
-
};
|
|
13008
|
-
// 开始动画
|
|
13009
|
-
const swiperAnimate = (a) => {
|
|
13010
|
-
//每次添加的时候先把样式清除一遍
|
|
13011
|
-
clearSwiperAnimate();
|
|
13012
|
-
const b = a.slides[a.activeIndex].querySelectorAll(".animation");
|
|
13013
|
-
for (let i = 0; i < b.length; i++) {
|
|
13014
|
-
b[i].style.visibility = "visible";
|
|
13015
|
-
const effect = b[i].attributes["swiper-animate-effect"]
|
|
13016
|
-
? b[i].attributes["swiper-animate-effect"].value
|
|
13017
|
-
: "";
|
|
13018
|
-
b[i].className = b[i].className + " " + effect + " " + "animated";
|
|
13019
|
-
const duration = b[i].attributes["swiper-animate-duration"]
|
|
13020
|
-
? b[i].attributes["swiper-animate-duration"].value
|
|
13021
|
-
: "";
|
|
13022
|
-
// duration && style
|
|
13023
|
-
const delay = b[i].attributes["swiper-animate-delay"]
|
|
13024
|
-
? b[i].attributes["swiper-animate-delay"].value
|
|
13025
|
-
: "";
|
|
13026
|
-
const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
|
|
13027
|
-
// delay && (style = style )
|
|
13028
|
-
b[i].setAttribute("style", style);
|
|
13029
|
-
}
|
|
13030
|
-
};
|
|
13031
|
-
// 清楚样式。 获取 .animation 类名， 注意这个所有的.animation 类名都会被获取，所以可以自己取
|
|
13032
|
-
const clearSwiperAnimate = () => {
|
|
13033
|
-
const allBoxes = window.document.documentElement.querySelectorAll(".animation");
|
|
13034
|
-
for (let i = 0; i < allBoxes.length; i++) {
|
|
13035
|
-
allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
|
|
13036
|
-
allBoxes[i].style.visibility = "hidden";
|
|
13037
|
-
allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
|
|
13038
|
-
const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
|
|
13039
|
-
/* eslint-disable-next-line */
|
|
13040
|
-
allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
|
|
13041
|
-
}
|
|
13042
|
-
};
|
|
13043
|
-
|
|
13044
12998
|
SwiperCore.use([Pagination$1, EffectFade]);
|
|
13045
|
-
function getComputedCSSText(style) {
|
|
13046
|
-
let cssText = '';
|
|
13047
|
-
for (const attr in style) {
|
|
13048
|
-
// #!zh: 驼峰转下划线
|
|
13049
|
-
cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
|
|
13050
|
-
}
|
|
13051
|
-
return cssText;
|
|
13052
|
-
}
|
|
13053
12999
|
var script$h = defineComponent({
|
|
13054
|
-
name: '
|
|
13000
|
+
name: 'SwiperPage',
|
|
13055
13001
|
props: {
|
|
13056
13002
|
work: {
|
|
13057
13003
|
type: Object,
|
|
13058
|
-
|
|
13004
|
+
required: true
|
|
13059
13005
|
},
|
|
13060
13006
|
components: {
|
|
13061
|
-
type: Array
|
|
13062
|
-
}
|
|
13007
|
+
type: Array
|
|
13008
|
+
}
|
|
13063
13009
|
},
|
|
13064
13010
|
components: {
|
|
13065
13011
|
Swiper,
|
|
13066
13012
|
SwiperSlide
|
|
13067
13013
|
},
|
|
13068
13014
|
setup(props) {
|
|
13069
|
-
// 重用并且简化
|
|
13070
|
-
// 抽离并且获得 styleProps
|
|
13071
13015
|
const componentRefs = ref(new Map());
|
|
13016
|
+
const upArrow = ref(true);
|
|
13072
13017
|
const setComponentRef = (el) => {
|
|
13073
13018
|
if (el) {
|
|
13074
13019
|
componentRefs.value.set(el.id, el);
|
|
13075
13020
|
}
|
|
13076
13021
|
};
|
|
13077
|
-
const
|
|
13078
|
-
|
|
13079
|
-
|
|
13080
|
-
|
|
13081
|
-
|
|
13082
|
-
|
|
13083
|
-
|
|
13084
|
-
|
|
13085
|
-
|
|
13086
|
-
const oldStyle = { ...component.props };
|
|
13087
|
-
oldStyle.position = 'absolute'; // 添加绝对布局
|
|
13088
|
-
const runAnimation = () => {
|
|
13089
|
-
if (animIdx < len) {
|
|
13090
|
-
const animation = animationQueue[animIdx];
|
|
13091
|
-
const animationStyle = {
|
|
13092
|
-
animationName: animation.type,
|
|
13093
|
-
animationDuration: `${animation.duration}s`,
|
|
13094
|
-
animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
|
|
13095
|
-
animationDelay: `${animation.delay}s`,
|
|
13096
|
-
animationFillMode: 'both',
|
|
13097
|
-
position: 'absolute' // 确保动画期间元素使用绝对布局
|
|
13098
|
-
};
|
|
13099
|
-
const element = componentRefs.value.get('component-' + component.id);
|
|
13100
|
-
if (element) {
|
|
13101
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13102
|
-
if (innerElement) {
|
|
13103
|
-
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13104
|
-
innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13105
|
-
animIdx++;
|
|
13106
|
-
}
|
|
13107
|
-
}
|
|
13022
|
+
const reloadAnimation = (componentId) => {
|
|
13023
|
+
const component = componentRefs.value.get(`component-${componentId}`);
|
|
13024
|
+
if (component) {
|
|
13025
|
+
const innerComponent = component.querySelector('.uni-lotties-component');
|
|
13026
|
+
if (innerComponent) {
|
|
13027
|
+
const keyAttr = innerComponent.getAttribute('key');
|
|
13028
|
+
if (keyAttr) {
|
|
13029
|
+
const newKey = parseInt(keyAttr) + 1;
|
|
13030
|
+
innerComponent.setAttribute('key', newKey.toString());
|
|
13108
13031
|
}
|
|
13109
13032
|
else {
|
|
13110
|
-
|
|
13111
|
-
if (element) {
|
|
13112
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13113
|
-
if (innerElement) {
|
|
13114
|
-
innerElement.style.cssText = getComputedCSSText(oldStyle);
|
|
13115
|
-
}
|
|
13116
|
-
}
|
|
13117
|
-
}
|
|
13118
|
-
};
|
|
13119
|
-
runAnimation();
|
|
13120
|
-
const element = componentRefs.value.get('component-' + component.id);
|
|
13121
|
-
if (element) {
|
|
13122
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13123
|
-
if (innerElement) {
|
|
13124
|
-
innerElement.addEventListener('animationend', runAnimation, false);
|
|
13125
|
-
innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
|
|
13033
|
+
innerComponent.setAttribute('key', '1');
|
|
13126
13034
|
}
|
|
13127
13035
|
}
|
|
13128
|
-
}
|
|
13036
|
+
}
|
|
13129
13037
|
};
|
|
13130
13038
|
const onSlideChange = (swiper) => {
|
|
13131
13039
|
const currentIndex = swiper.activeIndex;
|
|
13132
|
-
|
|
13133
|
-
|
|
13134
|
-
|
|
13135
|
-
|
|
13136
|
-
|
|
13137
|
-
|
|
13138
|
-
|
|
13139
|
-
}
|
|
13140
|
-
swiperAnimate(swiper);
|
|
13141
|
-
};
|
|
13142
|
-
const slideChangeTransitionEnd = (e) => {
|
|
13143
|
-
swiperAnimate(e);
|
|
13040
|
+
const currentPage = props.work.pages[currentIndex];
|
|
13041
|
+
currentPage.components.forEach((component) => {
|
|
13042
|
+
if (component.name === 'uni-lotties') {
|
|
13043
|
+
reloadAnimation(component.id);
|
|
13044
|
+
}
|
|
13045
|
+
});
|
|
13046
|
+
upArrow.value = currentIndex !== swiper.slides.length - 1;
|
|
13144
13047
|
};
|
|
13145
13048
|
const onSwiper = (swiper) => {
|
|
13146
|
-
swiperAnimateCache();
|
|
13147
|
-
swiperAnimate(swiper);
|
|
13148
13049
|
const currentIndex = swiper.activeIndex;
|
|
13149
|
-
|
|
13050
|
+
const currentPage = props.work.pages[currentIndex];
|
|
13051
|
+
currentPage.components.forEach((component) => {
|
|
13052
|
+
if (component.name === 'uni-lotties') {
|
|
13053
|
+
reloadAnimation(component.id);
|
|
13054
|
+
}
|
|
13055
|
+
});
|
|
13150
13056
|
};
|
|
13151
13057
|
const direction = 'vertical';
|
|
13152
|
-
// const effect = 'fade'
|
|
13153
13058
|
const slideClasses = (index) => {
|
|
13154
13059
|
return ['swiper-slide', `slide-${index}`];
|
|
13155
13060
|
};
|
|
@@ -13160,9 +13065,7 @@ var script$h = defineComponent({
|
|
|
13160
13065
|
onSwiper,
|
|
13161
13066
|
modules: [EffectFade],
|
|
13162
13067
|
direction,
|
|
13163
|
-
// effect,
|
|
13164
13068
|
upArrow,
|
|
13165
|
-
slideChangeTransitionEnd,
|
|
13166
13069
|
slideClasses
|
|
13167
13070
|
};
|
|
13168
13071
|
}
|
|
@@ -13214,8 +13117,8 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
13214
13117
|
id: `component-${item.id}`,
|
|
13215
13118
|
style: {"width":"100%","height":"100%"}
|
|
13216
13119
|
}, [
|
|
13217
|
-
(item.name
|
|
13218
|
-
? (openBlock(), createBlock(resolveDynamicComponent(item.name),
|
|
13120
|
+
(item.name !== 'uni-build-up' && !item.isHidden)
|
|
13121
|
+
? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, { onReloadAnimation: _ctx.reloadAnimation }), null, 16 /* FULL_PROPS */, ["onReloadAnimation"]))
|
|
13219
13122
|
: createCommentVNode("v-if", true)
|
|
13220
13123
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13221
13124
|
}), 128 /* KEYED_FRAGMENT */))
|
|
@@ -75704,6 +75607,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
75704
75607
|
}
|
|
75705
75608
|
|
|
75706
75609
|
script$5.render = render$5;
|
|
75610
|
+
script$5.__scopeId = "data-v-555efb8f";
|
|
75707
75611
|
script$5.__file = "src/components/UniLotties/UniLotties.vue";
|
|
75708
75612
|
|
|
75709
75613
|
script$5.install = (app) => {
|
|
@@ -13002,161 +13002,66 @@
|
|
|
13002
13002
|
}
|
|
13003
13003
|
};
|
|
13004
13004
|
|
|
13005
|
-
//隐藏元素
|
|
13006
|
-
const swiperAnimateCache = () => {
|
|
13007
|
-
const allBoxes = window.document.documentElement.querySelectorAll(".animation");
|
|
13008
|
-
for (let i = 0; i < allBoxes.length; i++) {
|
|
13009
|
-
allBoxes[i].attributes["style"]
|
|
13010
|
-
? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value)
|
|
13011
|
-
: allBoxes[i].setAttribute("swiper-animate-style-cache", " ");
|
|
13012
|
-
allBoxes[i].style.visibility = "hidden";
|
|
13013
|
-
}
|
|
13014
|
-
};
|
|
13015
|
-
// 开始动画
|
|
13016
|
-
const swiperAnimate = (a) => {
|
|
13017
|
-
//每次添加的时候先把样式清除一遍
|
|
13018
|
-
clearSwiperAnimate();
|
|
13019
|
-
const b = a.slides[a.activeIndex].querySelectorAll(".animation");
|
|
13020
|
-
for (let i = 0; i < b.length; i++) {
|
|
13021
|
-
b[i].style.visibility = "visible";
|
|
13022
|
-
const effect = b[i].attributes["swiper-animate-effect"]
|
|
13023
|
-
? b[i].attributes["swiper-animate-effect"].value
|
|
13024
|
-
: "";
|
|
13025
|
-
b[i].className = b[i].className + " " + effect + " " + "animated";
|
|
13026
|
-
const duration = b[i].attributes["swiper-animate-duration"]
|
|
13027
|
-
? b[i].attributes["swiper-animate-duration"].value
|
|
13028
|
-
: "";
|
|
13029
|
-
// duration && style
|
|
13030
|
-
const delay = b[i].attributes["swiper-animate-delay"]
|
|
13031
|
-
? b[i].attributes["swiper-animate-delay"].value
|
|
13032
|
-
: "";
|
|
13033
|
-
const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
|
|
13034
|
-
// delay && (style = style )
|
|
13035
|
-
b[i].setAttribute("style", style);
|
|
13036
|
-
}
|
|
13037
|
-
};
|
|
13038
|
-
// 清楚样式。 获取 .animation 类名， 注意这个所有的.animation 类名都会被获取，所以可以自己取
|
|
13039
|
-
const clearSwiperAnimate = () => {
|
|
13040
|
-
const allBoxes = window.document.documentElement.querySelectorAll(".animation");
|
|
13041
|
-
for (let i = 0; i < allBoxes.length; i++) {
|
|
13042
|
-
allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
|
|
13043
|
-
allBoxes[i].style.visibility = "hidden";
|
|
13044
|
-
allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
|
|
13045
|
-
const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
|
|
13046
|
-
/* eslint-disable-next-line */
|
|
13047
|
-
allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
|
|
13048
|
-
}
|
|
13049
|
-
};
|
|
13050
|
-
|
|
13051
13005
|
SwiperCore.use([Pagination$1, EffectFade]);
|
|
13052
|
-
function getComputedCSSText(style) {
|
|
13053
|
-
let cssText = '';
|
|
13054
|
-
for (const attr in style) {
|
|
13055
|
-
// #!zh: 驼峰转下划线
|
|
13056
|
-
cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
|
|
13057
|
-
}
|
|
13058
|
-
return cssText;
|
|
13059
|
-
}
|
|
13060
13006
|
var script$h = vue.defineComponent({
|
|
13061
|
-
name: '
|
|
13007
|
+
name: 'SwiperPage',
|
|
13062
13008
|
props: {
|
|
13063
13009
|
work: {
|
|
13064
13010
|
type: Object,
|
|
13065
|
-
|
|
13011
|
+
required: true
|
|
13066
13012
|
},
|
|
13067
13013
|
components: {
|
|
13068
|
-
type: Array
|
|
13069
|
-
}
|
|
13014
|
+
type: Array
|
|
13015
|
+
}
|
|
13070
13016
|
},
|
|
13071
13017
|
components: {
|
|
13072
13018
|
Swiper,
|
|
13073
13019
|
SwiperSlide
|
|
13074
13020
|
},
|
|
13075
13021
|
setup(props) {
|
|
13076
|
-
// 重用并且简化
|
|
13077
|
-
// 抽离并且获得 styleProps
|
|
13078
13022
|
const componentRefs = vue.ref(new Map());
|
|
13023
|
+
const upArrow = vue.ref(true);
|
|
13079
13024
|
const setComponentRef = (el) => {
|
|
13080
13025
|
if (el) {
|
|
13081
13026
|
componentRefs.value.set(el.id, el);
|
|
13082
13027
|
}
|
|
13083
13028
|
};
|
|
13084
|
-
const
|
|
13085
|
-
|
|
13086
|
-
|
|
13087
|
-
|
|
13088
|
-
|
|
13089
|
-
|
|
13090
|
-
|
|
13091
|
-
|
|
13092
|
-
|
|
13093
|
-
const oldStyle = { ...component.props };
|
|
13094
|
-
oldStyle.position = 'absolute'; // 添加绝对布局
|
|
13095
|
-
const runAnimation = () => {
|
|
13096
|
-
if (animIdx < len) {
|
|
13097
|
-
const animation = animationQueue[animIdx];
|
|
13098
|
-
const animationStyle = {
|
|
13099
|
-
animationName: animation.type,
|
|
13100
|
-
animationDuration: `${animation.duration}s`,
|
|
13101
|
-
animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
|
|
13102
|
-
animationDelay: `${animation.delay}s`,
|
|
13103
|
-
animationFillMode: 'both',
|
|
13104
|
-
position: 'absolute' // 确保动画期间元素使用绝对布局
|
|
13105
|
-
};
|
|
13106
|
-
const element = componentRefs.value.get('component-' + component.id);
|
|
13107
|
-
if (element) {
|
|
13108
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13109
|
-
if (innerElement) {
|
|
13110
|
-
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13111
|
-
innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13112
|
-
animIdx++;
|
|
13113
|
-
}
|
|
13114
|
-
}
|
|
13029
|
+
const reloadAnimation = (componentId) => {
|
|
13030
|
+
const component = componentRefs.value.get(`component-${componentId}`);
|
|
13031
|
+
if (component) {
|
|
13032
|
+
const innerComponent = component.querySelector('.uni-lotties-component');
|
|
13033
|
+
if (innerComponent) {
|
|
13034
|
+
const keyAttr = innerComponent.getAttribute('key');
|
|
13035
|
+
if (keyAttr) {
|
|
13036
|
+
const newKey = parseInt(keyAttr) + 1;
|
|
13037
|
+
innerComponent.setAttribute('key', newKey.toString());
|
|
13115
13038
|
}
|
|
13116
13039
|
else {
|
|
13117
|
-
|
|
13118
|
-
if (element) {
|
|
13119
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13120
|
-
if (innerElement) {
|
|
13121
|
-
innerElement.style.cssText = getComputedCSSText(oldStyle);
|
|
13122
|
-
}
|
|
13123
|
-
}
|
|
13124
|
-
}
|
|
13125
|
-
};
|
|
13126
|
-
runAnimation();
|
|
13127
|
-
const element = componentRefs.value.get('component-' + component.id);
|
|
13128
|
-
if (element) {
|
|
13129
|
-
const innerElement = element.querySelector('.inner-component');
|
|
13130
|
-
if (innerElement) {
|
|
13131
|
-
innerElement.addEventListener('animationend', runAnimation, false);
|
|
13132
|
-
innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
|
|
13040
|
+
innerComponent.setAttribute('key', '1');
|
|
13133
13041
|
}
|
|
13134
13042
|
}
|
|
13135
|
-
}
|
|
13043
|
+
}
|
|
13136
13044
|
};
|
|
13137
13045
|
const onSlideChange = (swiper) => {
|
|
13138
13046
|
const currentIndex = swiper.activeIndex;
|
|
13139
|
-
|
|
13140
|
-
|
|
13141
|
-
|
|
13142
|
-
|
|
13143
|
-
|
|
13144
|
-
|
|
13145
|
-
|
|
13146
|
-
}
|
|
13147
|
-
swiperAnimate(swiper);
|
|
13148
|
-
};
|
|
13149
|
-
const slideChangeTransitionEnd = (e) => {
|
|
13150
|
-
swiperAnimate(e);
|
|
13047
|
+
const currentPage = props.work.pages[currentIndex];
|
|
13048
|
+
currentPage.components.forEach((component) => {
|
|
13049
|
+
if (component.name === 'uni-lotties') {
|
|
13050
|
+
reloadAnimation(component.id);
|
|
13051
|
+
}
|
|
13052
|
+
});
|
|
13053
|
+
upArrow.value = currentIndex !== swiper.slides.length - 1;
|
|
13151
13054
|
};
|
|
13152
13055
|
const onSwiper = (swiper) => {
|
|
13153
|
-
swiperAnimateCache();
|
|
13154
|
-
swiperAnimate(swiper);
|
|
13155
13056
|
const currentIndex = swiper.activeIndex;
|
|
13156
|
-
|
|
13057
|
+
const currentPage = props.work.pages[currentIndex];
|
|
13058
|
+
currentPage.components.forEach((component) => {
|
|
13059
|
+
if (component.name === 'uni-lotties') {
|
|
13060
|
+
reloadAnimation(component.id);
|
|
13061
|
+
}
|
|
13062
|
+
});
|
|
13157
13063
|
};
|
|
13158
13064
|
const direction = 'vertical';
|
|
13159
|
-
// const effect = 'fade'
|
|
13160
13065
|
const slideClasses = (index) => {
|
|
13161
13066
|
return ['swiper-slide', `slide-${index}`];
|
|
13162
13067
|
};
|
|
@@ -13167,9 +13072,7 @@
|
|
|
13167
13072
|
onSwiper,
|
|
13168
13073
|
modules: [EffectFade],
|
|
13169
13074
|
direction,
|
|
13170
|
-
// effect,
|
|
13171
13075
|
upArrow,
|
|
13172
|
-
slideChangeTransitionEnd,
|
|
13173
13076
|
slideClasses
|
|
13174
13077
|
};
|
|
13175
13078
|
}
|
|
@@ -13221,8 +13124,8 @@
|
|
|
13221
13124
|
id: `component-${item.id}`,
|
|
13222
13125
|
style: {"width":"100%","height":"100%"}
|
|
13223
13126
|
}, [
|
|
13224
|
-
(item.name
|
|
13225
|
-
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.
|
|
13127
|
+
(item.name !== 'uni-build-up' && !item.isHidden)
|
|
13128
|
+
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({ key: 0 }, item.props, { onReloadAnimation: _ctx.reloadAnimation }), null, 16 /* FULL_PROPS */, ["onReloadAnimation"]))
|
|
13226
13129
|
: vue.createCommentVNode("v-if", true)
|
|
13227
13130
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13228
13131
|
}), 128 /* KEYED_FRAGMENT */))
|
|
@@ -75711,6 +75614,7 @@ summary tabindex target title type usemap value width wmode wrap`;
|
|
|
75711
75614
|
}
|
|
75712
75615
|
|
|
75713
75616
|
script$5.render = render$5;
|
|
75617
|
+
script$5.__scopeId = "data-v-555efb8f";
|
|
75714
75618
|
script$5.__file = "src/components/UniLotties/UniLotties.vue";
|
|
75715
75619
|
|
|
75716
75620
|
script$5.install = (app) => {
|