fix(space): 修复t-space在嵌套使用时，使用v-if隐藏会产生冗余空格的问题

Tencent · Oct 17, 2024 · afe4259 · afe4259
1 parent aa94731
commit afe4259
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/space/_example/combination.vue b/src/space/_example/combination.vue
@@ -0,0 +1,18 @@
+<template>
+  <t-space direction="vertical">
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-space>
+      <template v-if="true">
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button v-if="false">Button</t-button>
+        <t-button>Button</t-button>
+        <!-- <t-button v-if="false">Button</t-button> -->
+        <t-button v-if="true">Button</t-button>
+      </template>
+      <t-button>Button</t-button>
+    </t-space>
+  </t-space>
+</template>
diff --git a/src/space/space.tsx b/src/space/space.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, CSSProperties, Fragment } from 'vue';
+import { defineComponent, computed, CSSProperties, Fragment, Comment, isVNode } from 'vue';
 import props from './props';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks/tnode';
@@ -57,16 +57,18 @@ export default defineComponent({
     function renderChildren() {
       const children = getChildSlots();
       const separatorContent = renderTNodeJSX('separator');
-      return children.map((child, index) => {
-        // filter last child
-        const showSeparator = index + 1 !== children.length && separatorContent;
-        return (
-          <Fragment>
-            <div class={`${COMPONENT_NAME.value}-item`}>{child}</div>
-            {showSeparator && <div class={`${COMPONENT_NAME.value}-item-separator`}>{separatorContent}</div>}
-          </Fragment>
-        );
-      });
+      return children
+        .filter((child) => (isVNode(child) ? child.type !== Comment : true))
+        .map((child, index) => {
+          // filter last child
+          const showSeparator = index + 1 !== children.length && separatorContent;
+          return (
+            <Fragment>
+              <div class={`${COMPONENT_NAME.value}-item`}>{child}</div>
+              {showSeparator && <div class={`${COMPONENT_NAME.value}-item-separator`}>{separatorContent}</div>}
+            </Fragment>
+          );
+        });
     }
 
     return () => {