unika-components 1.0.314 → 1.0.316

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.
Files changed (4) hide show
  1. package/dist/unika-components.css +247 -247
  2. package/dist/unika-components.esm.js +26 -70
  3. package/dist/unika-components.umd.js +26 -70
  4. package/package.json +1 -1
package/dist/unika-components.css CHANGED
@@ -1,4 +1,11 @@
1
1
 
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
5
+ .uni-image-mask-wrapper {
6
+ display: inline-block;
7
+ }
8
+
2
9
  h2.uni-text-component, p.uni-text-component {
3
10
  margin-top: 0;
4
11
  margin-bottom: 0;
@@ -11,6 +18,39 @@ button.uni-text-component {
11
18
  box-sizing: border-box;
12
19
  white-space: pre-wrap;
13
20
  }
21
+
22
+
23
+ .uni-calendar-component {
24
+
25
+ }
26
+ .slot-number {
27
+ position: absolute;
28
+ bottom: 2px;
29
+ left: 7px;
30
+ font-size: 12px;
31
+ color: #666
32
+ }
33
+
34
+ .uni-video-component {
35
+ position: relative;
36
+ text-align: center;
37
+ }
38
+ .play-pause-button {
39
+ position: absolute;
40
+ top: 50%;
41
+ left: 50%;
42
+ transform: translate(-50%, -50%);
43
+ cursor: pointer;
44
+ font-size: 2rem;
45
+ color: #fff;
46
+ background: rgba(0, 0, 0, 0.6);
47
+ border-radius: 50%;
48
+ padding: 10px;
49
+ transition: background 0.3s;
50
+ }
51
+ .play-pause-button:hover {
52
+ background: rgba(0, 0, 0, 0.8);
53
+ }
14
54
 
15
55
  .slide-guide {
16
56
  position: absolute;
@@ -95,45 +135,19 @@ body, html {
95
135
  .edit-wrapper .uni-lotties-component, .edit-wrapper .uni-like-component, .edit-wrapper .uni-background-component, .edit-wrapper .uni-svg-component, .edit-wrapper .uni-register-form-component{
96
136
  position: static !important;
97
137
  }
98
-
99
- .uni-image-component {
100
- max-width: 100%;
101
- }
102
- .uni-image-mask-wrapper {
103
- display: inline-block;
104
- }
105
-
106
- .uni-video-component {
107
- position: relative;
108
- text-align: center;
109
- }
110
- .play-pause-button {
111
- position: absolute;
112
- top: 50%;
113
- left: 50%;
114
- transform: translate(-50%, -50%);
115
- cursor: pointer;
116
- font-size: 2rem;
117
- color: #fff;
118
- background: rgba(0, 0, 0, 0.6);
119
- border-radius: 50%;
120
- padding: 10px;
121
- transition: background 0.3s;
122
- }
123
- .play-pause-button:hover {
124
- background: rgba(0, 0, 0, 0.8);
125
- }
126
138
 
139
+ .swiper-warp {
140
+ width: 100%;
141
+ height: 100%;
142
+ }
127
143
 
128
- .uni-calendar-component {
129
-
144
+ .swiper-slide-component {
145
+ text-align: center;
130
146
  }
131
- .slot-number {
132
- position: absolute;
133
- bottom: 2px;
134
- left: 7px;
135
- font-size: 12px;
136
- color: #666
147
+
148
+ .swiper-slide img {
149
+ max-width: 100%;
150
+ max-height: 100%;
137
151
  }
138
152
 
139
153
  .ant-input-number {
@@ -171,30 +185,6 @@ body, html {
171
185
  vertical-align: top;
172
186
  }
173
187
 
174
- .effect {
175
- width: 100%;
176
- height: 100%;
177
- }
178
-
179
- .uni-lotties-component {
180
- width: 100%;
181
- height: 100%;
182
- }
183
-
184
- .swiper-warp {
185
- width: 100%;
186
- height: 100%;
187
- }
188
-
189
- .swiper-slide-component {
190
- text-align: center;
191
- }
192
-
193
- .swiper-slide img {
194
- max-width: 100%;
195
- max-height: 100%;
196
- }
197
-
198
188
  .like-button {
199
189
  display: flex;
200
190
  flex-direction: column;
@@ -217,8 +207,18 @@ body, html {
217
207
  color: #333;
218
208
  }
219
209
 
210
+ .effect {
211
+ width: 100%;
212
+ height: 100%;
213
+ }
214
+
220
215
  .uni-build-up-component {
221
216
  }
217
+
218
+ .uni-lotties-component {
219
+ width: 100%;
220
+ height: 100%;
221
+ }
222
222
 
223
223
  .uni-svg-component {
224
224
  display: inline-block;
@@ -771,193 +771,6 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
-
775
- .no-animation__card {
776
- font-weight: 500;
777
- font-size: var(--countdown-size, 2rem);
778
- line-height: 1.5;
779
- display: block;
780
- color: var(--main-color, #EC685C);
781
- }
782
-
783
- .flip-clock {
784
- text-align: center;
785
- perspective: 600px;
786
- margin: 0 auto;
787
- }
788
-
789
- .flip-clock *,
790
- .flip-clock *:before,
791
- .flip-clock *:after {
792
- box-sizing: border-box;
793
- }
794
-
795
- .flip-clock__piece {
796
- display: inline-block;
797
- margin: 0 0.2vw;
798
- }
799
-
800
- @media (min-width: 1000px) {
801
- .flip-clock__piece {
802
- margin: 0 5px;
803
- }
804
- }
805
-
806
- .flip-clock__slot {
807
- font-size: var(--label-size, 1rem);
808
- line-height: 1.5;
809
- display: block;
810
- color: var(--label-color, #222222);
811
- }
812
-
813
- .flip-card {
814
- display: block;
815
- position: relative;
816
- padding-bottom: 0.72em; /* halfHeight */
817
- font-size: var(--countdown-size, 2.25rem);
818
- line-height: 0.95;
819
- }
820
-
821
- @media (min-width: 1000px) {
822
- .flip-clock__slot {
823
- font-size: 1.2rem;
824
- }
825
-
826
- .flip-card {
827
- font-size: 3rem;
828
- }
829
- }
830
-
831
- .flip-card__top,
832
- .flip-card__bottom,
833
- .flip-card__back-bottom,
834
- .flip-card__back::before,
835
- .flip-card__back::after{
836
- display: block;
837
- height: 0.72em; /* halfHeight */
838
- color: var(--main-color, #EC685C);
839
- background: var(--main-flip-background-color, #222222);
840
- padding: 0.23em 0.15em 0.4em;
841
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
842
- backface-visibility: hidden;
843
- -webkit-backface-visibility: hidden;
844
- transform-style: preserve-3d;
845
- width: 2.1em;
846
- }
847
-
848
- .flip-card__top-4digits,
849
- .flip-card__bottom-4digits,
850
- .flip-card__back-bottom-4digits,
851
- .flip-card__back-4digits::before,
852
- .flip-card__back-4digits::after {
853
- display: block;
854
- height: 0.72em; /* halfHeight */
855
- color: var(--main-color, #EC685C);
856
- background: var(--main-flip-background-color, #222222);
857
- padding: 0.23em 0.15em 0.4em;
858
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
859
- backface-visibility: hidden;
860
- -webkit-backface-visibility: hidden;
861
- transform-style: preserve-3d;
862
- width: 2.65em;
863
- }
864
-
865
- .flip-card__bottom,
866
- .flip-card__back-bottom,
867
- .flip-card__bottom-4digits,
868
- .flip-card__back-bottom-4digits {
869
- color: var(--second-flip-color, #EC685C);
870
- position: absolute;
871
- top: 50%;
872
- left: 0;
873
- border-top: solid 1px var(--second-flip-background-color, #000);
874
- background: var(--second-flip-background-color, #393939);
875
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
876
- pointer-events: none;
877
- overflow: hidden;
878
- z-index: 2;
879
- }
880
-
881
- .flip-card__back-bottom,
882
- .flip-card__back-bottom-4digits {
883
- z-index: 1;
884
- }
885
-
886
- .flip-card__bottom::after,
887
- .flip-card__back-bottom::after,
888
- .flip-card__bottom-4digits::after,
889
- .flip-card__back-bottom-4digits::after {
890
- display: block;
891
- margin-top: -0.72em; /* Negative halfHeight */
892
- }
893
- .flip-card__back::before,
894
- .flip-card__bottom::after,
895
- .flip-card__back-bottom::after,
896
- .flip-card__back-4digits::before,
897
- .flip-card__bottom-4digits::after,
898
- .flip-card__back-bottom-4digits::after {
899
- content: attr(data-value);
900
- }
901
-
902
- .flip-card__back,
903
- .flip-card__back-4digits {
904
- position: absolute;
905
- top: 0;
906
- height: 100%;
907
- left: 0%;
908
- pointer-events: none;
909
- }
910
- .flip-card__back::before,
911
- .flip-card__back-4digits::before {
912
- position: relative;
913
- overflow: hidden;
914
- z-index: -1;
915
- }
916
-
917
- .flip .flip-card__back::before,
918
- .flip .flip-card__back-4digits::before {
919
- z-index: 1;
920
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
921
- animation-fill-mode: both;
922
- transform-origin: center bottom;
923
- }
924
-
925
- .flip .flip-card__bottom,
926
- .flip .flip-card__bottom-4digits {
927
- transform-origin: center top;
928
- animation-fill-mode: both;
929
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
930
- }
931
- @keyframes flipTop {
932
- 0% {
933
- transform: rotateX(0deg);
934
- z-index: 2;
935
- }
936
- 0%, 99% {
937
- opacity: 1;
938
- }
939
- 100% {
940
- transform: rotateX(-90deg);
941
- opacity: 0;
942
- }
943
- }
944
-
945
- @keyframes flipBottom {
946
- 0%, 50% {
947
- z-index: -1;
948
- transform: rotateX(90deg);
949
- opacity: 0;
950
- }
951
- 51% {
952
- opacity: 1;
953
- }
954
- 100% {
955
- opacity: 1;
956
- transform: rotateX(0deg);
957
- z-index: 5;
958
- }
959
- }
960
-
961
774
  .unika-calendar-box {
962
775
  position: relative;
963
776
  width: 325px !important;
@@ -1218,3 +1031,190 @@ button.swiper-pagination-bullet {
1218
1031
  padding: 0 0px;
1219
1032
  border-bottom: 1px solid
1220
1033
  }
1034
+
1035
+
1036
+ .no-animation__card {
1037
+ font-weight: 500;
1038
+ font-size: var(--countdown-size, 2rem);
1039
+ line-height: 1.5;
1040
+ display: block;
1041
+ color: var(--main-color, #EC685C);
1042
+ }
1043
+
1044
+ .flip-clock {
1045
+ text-align: center;
1046
+ perspective: 600px;
1047
+ margin: 0 auto;
1048
+ }
1049
+
1050
+ .flip-clock *,
1051
+ .flip-clock *:before,
1052
+ .flip-clock *:after {
1053
+ box-sizing: border-box;
1054
+ }
1055
+
1056
+ .flip-clock__piece {
1057
+ display: inline-block;
1058
+ margin: 0 0.2vw;
1059
+ }
1060
+
1061
+ @media (min-width: 1000px) {
1062
+ .flip-clock__piece {
1063
+ margin: 0 5px;
1064
+ }
1065
+ }
1066
+
1067
+ .flip-clock__slot {
1068
+ font-size: var(--label-size, 1rem);
1069
+ line-height: 1.5;
1070
+ display: block;
1071
+ color: var(--label-color, #222222);
1072
+ }
1073
+
1074
+ .flip-card {
1075
+ display: block;
1076
+ position: relative;
1077
+ padding-bottom: 0.72em; /* halfHeight */
1078
+ font-size: var(--countdown-size, 2.25rem);
1079
+ line-height: 0.95;
1080
+ }
1081
+
1082
+ @media (min-width: 1000px) {
1083
+ .flip-clock__slot {
1084
+ font-size: 1.2rem;
1085
+ }
1086
+
1087
+ .flip-card {
1088
+ font-size: 3rem;
1089
+ }
1090
+ }
1091
+
1092
+ .flip-card__top,
1093
+ .flip-card__bottom,
1094
+ .flip-card__back-bottom,
1095
+ .flip-card__back::before,
1096
+ .flip-card__back::after{
1097
+ display: block;
1098
+ height: 0.72em; /* halfHeight */
1099
+ color: var(--main-color, #EC685C);
1100
+ background: var(--main-flip-background-color, #222222);
1101
+ padding: 0.23em 0.15em 0.4em;
1102
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1103
+ backface-visibility: hidden;
1104
+ -webkit-backface-visibility: hidden;
1105
+ transform-style: preserve-3d;
1106
+ width: 2.1em;
1107
+ }
1108
+
1109
+ .flip-card__top-4digits,
1110
+ .flip-card__bottom-4digits,
1111
+ .flip-card__back-bottom-4digits,
1112
+ .flip-card__back-4digits::before,
1113
+ .flip-card__back-4digits::after {
1114
+ display: block;
1115
+ height: 0.72em; /* halfHeight */
1116
+ color: var(--main-color, #EC685C);
1117
+ background: var(--main-flip-background-color, #222222);
1118
+ padding: 0.23em 0.15em 0.4em;
1119
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1120
+ backface-visibility: hidden;
1121
+ -webkit-backface-visibility: hidden;
1122
+ transform-style: preserve-3d;
1123
+ width: 2.65em;
1124
+ }
1125
+
1126
+ .flip-card__bottom,
1127
+ .flip-card__back-bottom,
1128
+ .flip-card__bottom-4digits,
1129
+ .flip-card__back-bottom-4digits {
1130
+ color: var(--second-flip-color, #EC685C);
1131
+ position: absolute;
1132
+ top: 50%;
1133
+ left: 0;
1134
+ border-top: solid 1px var(--second-flip-background-color, #000);
1135
+ background: var(--second-flip-background-color, #393939);
1136
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1137
+ pointer-events: none;
1138
+ overflow: hidden;
1139
+ z-index: 2;
1140
+ }
1141
+
1142
+ .flip-card__back-bottom,
1143
+ .flip-card__back-bottom-4digits {
1144
+ z-index: 1;
1145
+ }
1146
+
1147
+ .flip-card__bottom::after,
1148
+ .flip-card__back-bottom::after,
1149
+ .flip-card__bottom-4digits::after,
1150
+ .flip-card__back-bottom-4digits::after {
1151
+ display: block;
1152
+ margin-top: -0.72em; /* Negative halfHeight */
1153
+ }
1154
+ .flip-card__back::before,
1155
+ .flip-card__bottom::after,
1156
+ .flip-card__back-bottom::after,
1157
+ .flip-card__back-4digits::before,
1158
+ .flip-card__bottom-4digits::after,
1159
+ .flip-card__back-bottom-4digits::after {
1160
+ content: attr(data-value);
1161
+ }
1162
+
1163
+ .flip-card__back,
1164
+ .flip-card__back-4digits {
1165
+ position: absolute;
1166
+ top: 0;
1167
+ height: 100%;
1168
+ left: 0%;
1169
+ pointer-events: none;
1170
+ }
1171
+ .flip-card__back::before,
1172
+ .flip-card__back-4digits::before {
1173
+ position: relative;
1174
+ overflow: hidden;
1175
+ z-index: -1;
1176
+ }
1177
+
1178
+ .flip .flip-card__back::before,
1179
+ .flip .flip-card__back-4digits::before {
1180
+ z-index: 1;
1181
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1182
+ animation-fill-mode: both;
1183
+ transform-origin: center bottom;
1184
+ }
1185
+
1186
+ .flip .flip-card__bottom,
1187
+ .flip .flip-card__bottom-4digits {
1188
+ transform-origin: center top;
1189
+ animation-fill-mode: both;
1190
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1191
+ }
1192
+ @keyframes flipTop {
1193
+ 0% {
1194
+ transform: rotateX(0deg);
1195
+ z-index: 2;
1196
+ }
1197
+ 0%, 99% {
1198
+ opacity: 1;
1199
+ }
1200
+ 100% {
1201
+ transform: rotateX(-90deg);
1202
+ opacity: 0;
1203
+ }
1204
+ }
1205
+
1206
+ @keyframes flipBottom {
1207
+ 0%, 50% {
1208
+ z-index: -1;
1209
+ transform: rotateX(90deg);
1210
+ opacity: 0;
1211
+ }
1212
+ 51% {
1213
+ opacity: 1;
1214
+ }
1215
+ 100% {
1216
+ opacity: 1;
1217
+ transform: rotateX(0deg);
1218
+ z-index: 5;
1219
+ }
1220
+ }
package/dist/unika-components.esm.js CHANGED
@@ -13210,43 +13210,6 @@ var SwiperSlide = {
13210
13210
  }
13211
13211
  };
13212
13212
 
13213
- //隐藏元素
13214
- // 开始动画
13215
- const swiperAnimate = (a) => {
13216
- //每次添加的时候先把样式清除一遍
13217
- clearSwiperAnimate();
13218
- const b = a.slides[a.activeIndex].querySelectorAll(".animation");
13219
- for (let i = 0; i < b.length; i++) {
13220
- b[i].style.visibility = "visible";
13221
- const effect = b[i].attributes["swiper-animate-effect"]
13222
- ? b[i].attributes["swiper-animate-effect"].value
13223
- : "";
13224
- b[i].className = b[i].className + " " + effect + " " + "animated";
13225
- const duration = b[i].attributes["swiper-animate-duration"]
13226
- ? b[i].attributes["swiper-animate-duration"].value
13227
- : "";
13228
- // duration && style
13229
- const delay = b[i].attributes["swiper-animate-delay"]
13230
- ? b[i].attributes["swiper-animate-delay"].value
13231
- : "";
13232
- const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
13233
- // delay && (style = style )
13234
- b[i].setAttribute("style", style);
13235
- }
13236
- };
13237
- // 清楚样式。 获取 .animation 类名， 注意这个所有的.animation 类名都会被获取，所以可以自己取
13238
- const clearSwiperAnimate = () => {
13239
- const allBoxes = window.document.documentElement.querySelectorAll(".animation");
13240
- for (let i = 0; i < allBoxes.length; i++) {
13241
- allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
13242
- allBoxes[i].style.visibility = "hidden";
13243
- allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
13244
- const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
13245
- /* eslint-disable-next-line */
13246
- allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
13247
- }
13248
- };
13249
-
13250
13213
  SwiperCore.use([Pagination$1, EffectFade, Controller$1]);
13251
13214
  function getComputedCSSText(style) {
13252
13215
  let cssText = '';
@@ -13274,6 +13237,7 @@ var script$h = defineComponent({
13274
13237
  const componentRefs = ref(new Map());
13275
13238
  const currentPage = ref(0);
13276
13239
  const totalPages = ref(props.work && props.work.pages.length || 1); // 假设总页数为10
13240
+ const slideChangeTriggered = ref(false); // 标志位，防止重复触发
13277
13241
  const setAnimationRef = (el) => {
13278
13242
  if (el) {
13279
13243
  componentRefs.value.set(el.id, el);
@@ -13368,29 +13332,28 @@ var script$h = defineComponent({
13368
13332
  };
13369
13333
  const onSlideChange = (swiper) => {
13370
13334
  const currentIndex = swiper.activeIndex;
13371
- currentPage.value = (currentIndex - 1);
13372
- if (currentPage.value == totalPages.value) {
13373
- currentPage.value = 0;
13374
- }
13375
- console.log('aaaaaaaa');
13376
- console.log(totalPages.value);
13377
- console.log(currentIndex);
13378
- console.log(currentPage.value);
13379
- sendPageInfo();
13380
- try {
13381
- runAnimations(currentIndex);
13382
- callUniLottiesPlay(currentIndex);
13383
- }
13384
- catch (error) {
13385
- console.error("Error in onSlideChange:", error);
13386
- }
13387
- if (currentIndex === swiper.slides.length - 1) {
13388
- upArrow.value = false;
13389
- }
13390
- else {
13391
- upArrow.value = true;
13335
+ if (!slideChangeTriggered.value) {
13336
+ currentPage.value = (currentIndex - 1);
13337
+ if (currentPage.value == totalPages.value) {
13338
+ currentPage.value = 0;
13339
+ }
13340
+ sendPageInfo();
13341
+ try {
13342
+ runAnimations(currentIndex);
13343
+ callUniLottiesPlay(currentIndex);
13344
+ }
13345
+ catch (error) {
13346
+ console.error("Error in onSlideChange:", error);
13347
+ }
13348
+ if (currentIndex === swiper.slides.length - 1) {
13349
+ upArrow.value = false;
13350
+ }
13351
+ else {
13352
+ upArrow.value = true;
13353
+ }
13354
+ // swiperAnimate(swiper);
13392
13355
  }
13393
- swiperAnimate(swiper);
13356
+ slideChangeTriggered.value = false; // 重置标志位
13394
13357
  };
13395
13358
  // const slideChangeTransitionEnd = (e: any) => {
13396
13359
  // swiperAnimate(e);
@@ -13415,10 +13378,11 @@ var script$h = defineComponent({
13415
13378
  };
13416
13379
  // 切换页码函数
13417
13380
  const switchPage = (index) => {
13418
- console.log(' switch page -----------');
13419
- console.log(index);
13420
13381
  if (controlledSwiper.value) {
13421
- controlledSwiper.value.slideTo(index, 500);
13382
+ slideChangeTriggered.value = true; // 设置标志位，防止 slideTo 引发的 onSlideChange 触发
13383
+ if (controlledSwiper.value) {
13384
+ controlledSwiper.value.slideTo(index, 500);
13385
+ }
13422
13386
  }
13423
13387
  };
13424
13388
  // 翻到下一页
@@ -13429,8 +13393,6 @@ var script$h = defineComponent({
13429
13393
  else {
13430
13394
  currentPage.value = 0;
13431
13395
  }
13432
- console.log('翻到下一页');
13433
- console.log(currentPage.value);
13434
13396
  switchPage(currentPage.value);
13435
13397
  sendPageInfo();
13436
13398
  };
@@ -13442,8 +13404,6 @@ var script$h = defineComponent({
13442
13404
  else {
13443
13405
  currentPage.value = totalPages.value - 1;
13444
13406
  }
13445
- console.log('翻到上一页');
13446
- console.log(currentPage.value);
13447
13407
  switchPage(currentPage.value);
13448
13408
  sendPageInfo();
13449
13409
  };
@@ -13453,13 +13413,9 @@ var script$h = defineComponent({
13453
13413
  cur: currentPage.value,
13454
13414
  count: totalPages.value,
13455
13415
  }, '*');
13456
- console.log('bbbbbbbbbbbbbbb');
13457
- console.log(currentPage.value);
13458
13416
  };
13459
13417
  // 监听来自父组件的消息
13460
13418
  const handleMessage = (event) => {
13461
- console.log('iframe up down -----------');
13462
- console.log(event.data);
13463
13419
  if (event.data === 'up') {
13464
13420
  flipToNextPage();
13465
13421
  }
package/dist/unika-components.umd.js CHANGED
@@ -13217,43 +13217,6 @@
13217
13217
  }
13218
13218
  };
13219
13219
 
13220
- //隐藏元素
13221
- // 开始动画
13222
- const swiperAnimate = (a) => {
13223
- //每次添加的时候先把样式清除一遍
13224
- clearSwiperAnimate();
13225
- const b = a.slides[a.activeIndex].querySelectorAll(".animation");
13226
- for (let i = 0; i < b.length; i++) {
13227
- b[i].style.visibility = "visible";
13228
- const effect = b[i].attributes["swiper-animate-effect"]
13229
- ? b[i].attributes["swiper-animate-effect"].value
13230
- : "";
13231
- b[i].className = b[i].className + " " + effect + " " + "animated";
13232
- const duration = b[i].attributes["swiper-animate-duration"]
13233
- ? b[i].attributes["swiper-animate-duration"].value
13234
- : "";
13235
- // duration && style
13236
- const delay = b[i].attributes["swiper-animate-delay"]
13237
- ? b[i].attributes["swiper-animate-delay"].value
13238
- : "";
13239
- const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
13240
- // delay && (style = style )
13241
- b[i].setAttribute("style", style);
13242
- }
13243
- };
13244
- // 清楚样式。 获取 .animation 类名， 注意这个所有的.animation 类名都会被获取，所以可以自己取
13245
- const clearSwiperAnimate = () => {
13246
- const allBoxes = window.document.documentElement.querySelectorAll(".animation");
13247
- for (let i = 0; i < allBoxes.length; i++) {
13248
- allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
13249
- allBoxes[i].style.visibility = "hidden";
13250
- allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
13251
- const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
13252
- /* eslint-disable-next-line */
13253
- allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
13254
- }
13255
- };
13256
-
13257
13220
  SwiperCore.use([Pagination$1, EffectFade, Controller$1]);
13258
13221
  function getComputedCSSText(style) {
13259
13222
  let cssText = '';
@@ -13281,6 +13244,7 @@
13281
13244
  const componentRefs = vue.ref(new Map());
13282
13245
  const currentPage = vue.ref(0);
13283
13246
  const totalPages = vue.ref(props.work && props.work.pages.length || 1); // 假设总页数为10
13247
+ const slideChangeTriggered = vue.ref(false); // 标志位，防止重复触发
13284
13248
  const setAnimationRef = (el) => {
13285
13249
  if (el) {
13286
13250
  componentRefs.value.set(el.id, el);
@@ -13375,29 +13339,28 @@
13375
13339
  };
13376
13340
  const onSlideChange = (swiper) => {
13377
13341
  const currentIndex = swiper.activeIndex;
13378
- currentPage.value = (currentIndex - 1);
13379
- if (currentPage.value == totalPages.value) {
13380
- currentPage.value = 0;
13381
- }
13382
- console.log('aaaaaaaa');
13383
- console.log(totalPages.value);
13384
- console.log(currentIndex);
13385
- console.log(currentPage.value);
13386
- sendPageInfo();
13387
- try {
13388
- runAnimations(currentIndex);
13389
- callUniLottiesPlay(currentIndex);
13390
- }
13391
- catch (error) {
13392
- console.error("Error in onSlideChange:", error);
13393
- }
13394
- if (currentIndex === swiper.slides.length - 1) {
13395
- upArrow.value = false;
13396
- }
13397
- else {
13398
- upArrow.value = true;
13342
+ if (!slideChangeTriggered.value) {
13343
+ currentPage.value = (currentIndex - 1);
13344
+ if (currentPage.value == totalPages.value) {
13345
+ currentPage.value = 0;
13346
+ }
13347
+ sendPageInfo();
13348
+ try {
13349
+ runAnimations(currentIndex);
13350
+ callUniLottiesPlay(currentIndex);
13351
+ }
13352
+ catch (error) {
13353
+ console.error("Error in onSlideChange:", error);
13354
+ }
13355
+ if (currentIndex === swiper.slides.length - 1) {
13356
+ upArrow.value = false;
13357
+ }
13358
+ else {
13359
+ upArrow.value = true;
13360
+ }
13361
+ // swiperAnimate(swiper);
13399
13362
  }
13400
- swiperAnimate(swiper);
13363
+ slideChangeTriggered.value = false; // 重置标志位
13401
13364
  };
13402
13365
  // const slideChangeTransitionEnd = (e: any) => {
13403
13366
  // swiperAnimate(e);
@@ -13422,10 +13385,11 @@
13422
13385
  };
13423
13386
  // 切换页码函数
13424
13387
  const switchPage = (index) => {
13425
- console.log(' switch page -----------');
13426
- console.log(index);
13427
13388
  if (controlledSwiper.value) {
13428
- controlledSwiper.value.slideTo(index, 500);
13389
+ slideChangeTriggered.value = true; // 设置标志位，防止 slideTo 引发的 onSlideChange 触发
13390
+ if (controlledSwiper.value) {
13391
+ controlledSwiper.value.slideTo(index, 500);
13392
+ }
13429
13393
  }
13430
13394
  };
13431
13395
  // 翻到下一页
@@ -13436,8 +13400,6 @@
13436
13400
  else {
13437
13401
  currentPage.value = 0;
13438
13402
  }
13439
- console.log('翻到下一页');
13440
- console.log(currentPage.value);
13441
13403
  switchPage(currentPage.value);
13442
13404
  sendPageInfo();
13443
13405
  };
@@ -13449,8 +13411,6 @@
13449
13411
  else {
13450
13412
  currentPage.value = totalPages.value - 1;
13451
13413
  }
13452
- console.log('翻到上一页');
13453
- console.log(currentPage.value);
13454
13414
  switchPage(currentPage.value);
13455
13415
  sendPageInfo();
13456
13416
  };
@@ -13460,13 +13420,9 @@
13460
13420
  cur: currentPage.value,
13461
13421
  count: totalPages.value,
13462
13422
  }, '*');
13463
- console.log('bbbbbbbbbbbbbbb');
13464
- console.log(currentPage.value);
13465
13423
  };
13466
13424
  // 监听来自父组件的消息
13467
13425
  const handleMessage = (event) => {
13468
- console.log('iframe up down -----------');
13469
- console.log(event.data);
13470
13426
  if (event.data === 'up') {
13471
13427
  flipToNextPage();
13472
13428
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.314",
3
+ "version": "1.0.316",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",