unika-components 1.0.232 → 1.0.233

package/dist/src/components/UniLotties/UniLotties.vue.d.ts

@@ -330,6 +330,7 @@ declare const _default: import("vue").DefineComponent<{
     loopC: import("vue").Ref<any>;
     delayC: import("vue").Ref<any>;
     animationLinkC: import("vue").Ref<any>;
+    lottieKey: import("vue").Ref<number>;
     play: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     [x: string]: any;

package/dist/unika-components.css

@@ -1,4 +1,8 @@
 
+.uni-image-component {
+  max-width: 100%;
+}
+
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -10,6 +14,40 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
+}
+
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
+}
+
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
+}
 
  .slide-guide {
     position: absolute;
@@ -83,32 +121,6 @@ body, html {
         transform: translate3d(-50%, -50%, 0);
     }
 }
-
-.uni-image-component {
-  max-width: 100%;
-}
-
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
-
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
-
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
 
   .uni-video-component {
     position: relative;
@@ -131,16 +143,9 @@ body, html {
     background: rgba(0, 0, 0, 0.8);
   }
 
-
-.uni-calendar-component {
-
-}
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
+.effect {
+  width: 100%;
+  height: 100%;
 }
 
 .swiper-warp {
@@ -157,6 +162,9 @@ body, html {
   max-height: 100%;
 }
 
+  .uni-build-up-component {
+  }
+
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -191,14 +199,6 @@ body, html {
   margin-bottom: 0px;
   vertical-align: top;
 }
-
-.effect {
-  width: 100%;
-  height: 100%;
-}
-
-  .uni-build-up-component {
-  }
 
 .uni-svg-component {
   display: inline-block;

package/dist/unika-components.esm.js

@@ -75325,10 +75325,6 @@ var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]
 
 const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
 const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
-// import AstronautJSON from './lotties/carton.json'
-// import zlweddingbai from './lotties/zlweddingbai.json'
-// https://assets10.lottiefiles.com/packages/lf20_soCRuE.json
-// array that contains style props
 var script$5 = defineComponent({
     name: 'uni-lotties',
     props: {
@@ -75338,34 +75334,18 @@ var script$5 = defineComponent({
         Vue3Lottie
     },
     setup(props) {
-        // 重用并且简化
-        // 抽离并且获得 styleProps
         const styleProps = useStylePick(props, defaultStyles$3);
         const handleClick = useComponentClick(props);
         const lottieAnimation = ref(null);
         const loopC = ref(props.loop);
         const delayC = ref(props.delay);
         const animationLinkC = ref(props.animationLink);
-        watch(() => props.loop, (newValue, oldValue) => {
-            loopC.value = newValue;
-            animationLinkC.value = props.animationLink;
-            setTimeout(() => {
-                animationLinkC.value = props.animationLink;
-            }, 10);
-        }, { deep: true });
-        watch(() => props.delay, (newValue, oldValue) => {
-            delayC.value = newValue;
-            animationLinkC.value = props.animationLink;
-            setTimeout(() => {
-                animationLinkC.value = props.animationLink;
-            }, 10);
-        }, { deep: true });
-        watch(() => props.animationLink, (newValue, oldValue) => {
-            animationLinkC.value = newValue;
-            animationLinkC.value = props.animationLink;
-            setTimeout(() => {
-                animationLinkC.value = props.animationLink;
-            }, 10);
+        const lottieKey = ref(0);
+        watch([() => props.loop, () => props.delay, () => props.animationLink], ([newLoop, newDelay, newAnimationLink]) => {
+            loopC.value = newLoop;
+            delayC.value = newDelay;
+            animationLinkC.value = newAnimationLink;
+            lottieKey.value += 1; // 更新 key 值，强制重新渲染组件
         }, { deep: true });
         const play = () => {
             if (lottieAnimation.value) {
@@ -75375,12 +75355,12 @@ var script$5 = defineComponent({
         };
         return {
             styleProps,
-            // AstronautJSON,
             handleClick,
             lottieAnimation,
             loopC,
             delayC,
             animationLinkC,
+            lottieKey,
             play
         };
     }
@@ -75395,6 +75375,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     animationLink: _ctx.animationLinkC,
     loop: _ctx.loopC,
     delay: _ctx.delayC,
+    key: _ctx.lottieKey,
     ref: "lottieAnimation",
     class: "uni-lotties-component inner-component"
   }, null, 8 /* PROPS */, ["onClick", "style", "animationLink", "loop", "delay"]))

package/dist/unika-components.umd.js

@@ -75332,10 +75332,6 @@ summary tabindex target title type usemap value width wmode wrap`;
 
   const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
   const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
-  // import AstronautJSON from './lotties/carton.json'
-  // import zlweddingbai from './lotties/zlweddingbai.json'
-  // https://assets10.lottiefiles.com/packages/lf20_soCRuE.json
-  // array that contains style props
   var script$5 = vue.defineComponent({
       name: 'uni-lotties',
       props: {
@@ -75345,34 +75341,18 @@ summary tabindex target title type usemap value width wmode wrap`;
           Vue3Lottie
       },
       setup(props) {
-          // 重用并且简化
-          // 抽离并且获得 styleProps
           const styleProps = useStylePick(props, defaultStyles$3);
           const handleClick = useComponentClick(props);
           const lottieAnimation = vue.ref(null);
           const loopC = vue.ref(props.loop);
           const delayC = vue.ref(props.delay);
           const animationLinkC = vue.ref(props.animationLink);
-          vue.watch(() => props.loop, (newValue, oldValue) => {
-              loopC.value = newValue;
-              animationLinkC.value = props.animationLink;
-              setTimeout(() => {
-                  animationLinkC.value = props.animationLink;
-              }, 10);
-          }, { deep: true });
-          vue.watch(() => props.delay, (newValue, oldValue) => {
-              delayC.value = newValue;
-              animationLinkC.value = props.animationLink;
-              setTimeout(() => {
-                  animationLinkC.value = props.animationLink;
-              }, 10);
-          }, { deep: true });
-          vue.watch(() => props.animationLink, (newValue, oldValue) => {
-              animationLinkC.value = newValue;
-              animationLinkC.value = props.animationLink;
-              setTimeout(() => {
-                  animationLinkC.value = props.animationLink;
-              }, 10);
+          const lottieKey = vue.ref(0);
+          vue.watch([() => props.loop, () => props.delay, () => props.animationLink], ([newLoop, newDelay, newAnimationLink]) => {
+              loopC.value = newLoop;
+              delayC.value = newDelay;
+              animationLinkC.value = newAnimationLink;
+              lottieKey.value += 1; // 更新 key 值，强制重新渲染组件
           }, { deep: true });
           const play = () => {
               if (lottieAnimation.value) {
@@ -75382,12 +75362,12 @@ summary tabindex target title type usemap value width wmode wrap`;
           };
           return {
               styleProps,
-              // AstronautJSON,
               handleClick,
               lottieAnimation,
               loopC,
               delayC,
               animationLinkC,
+              lottieKey,
               play
           };
       }
@@ -75402,6 +75382,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       animationLink: _ctx.animationLinkC,
       loop: _ctx.loopC,
       delay: _ctx.delayC,
+      key: _ctx.lottieKey,
       ref: "lottieAnimation",
       class: "uni-lotties-component inner-component"
     }, null, 8 /* PROPS */, ["onClick", "style", "animationLink", "loop", "delay"]))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.232",
+  "version": "1.0.233",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",