fix(marquee): performance warning caused by non-function default slot (…

…#6600) close #6600
tusen-ai · Jan 15, 2025 · ba135c1 · ba135c1
1 parent c96427d
commit ba135c1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Fixes
+
+- Fix `n-marquee` component Non-function value encountered for default slot warning.
+
 ## 2.41.0
 
 ### Breaking Changes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Fixes
+
+- 修复 `n-marquee` 组件 Non-function value encountered for default slot 警告
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/src/marquee/src/Marquee.tsx b/src/marquee/src/Marquee.tsx
@@ -95,11 +95,15 @@ export default defineComponent({
     } = this
     const originalNode = (
       <VResizeObserver onResize={this.handleContentResize}>
-        <div
-          class={`${mergedClsPrefix}-marquee__item ${mergedClsPrefix}-marquee__original-item`}
-        >
-          {$slots}
-        </div>
+        {{
+          default: () => (
+            <div
+              class={`${mergedClsPrefix}-marquee__item ${mergedClsPrefix}-marquee__original-item`}
+            >
+              {$slots}
+            </div>
+          )
+        }}
       </VResizeObserver>
     )
     const mirrorNode = (
@@ -108,22 +112,26 @@ export default defineComponent({
     if (this.autoFill) {
       return (
         <VResizeObserver onResize={this.handleContainerResize}>
-          <div
-            class={`${mergedClsPrefix}-marquee ${mergedClsPrefix}-marquee--auto-fill`}
-            ref="containerElRef"
-            style={animationCssVars}
-          >
-            <div
-              class={`${mergedClsPrefix}-marquee__group`}
-              onAnimationiteration={handleAnimationIteration}
-            >
-              {originalNode}
-              {repeat(repeatCountInOneGroup - 1, mirrorNode)}
-            </div>
-            <div class={`${mergedClsPrefix}-marquee__group`}>
-              {repeat(repeatCountInOneGroup, mirrorNode)}
-            </div>
-          </div>
+          {{
+            default: () => (
+              <div
+                class={`${mergedClsPrefix}-marquee ${mergedClsPrefix}-marquee--auto-fill`}
+                ref="containerElRef"
+                style={animationCssVars}
+              >
+                <div
+                  class={`${mergedClsPrefix}-marquee__group`}
+                  onAnimationiteration={handleAnimationIteration}
+                >
+                  {originalNode}
+                  {repeat(repeatCountInOneGroup - 1, mirrorNode)}
+                </div>
+                <div class={`${mergedClsPrefix}-marquee__group`}>
+                  {repeat(repeatCountInOneGroup, mirrorNode)}
+                </div>
+              </div>
+            )
+          }}
         </VResizeObserver>
       )
     }