fix: [Tabs] 过滤非tabPanes

rashagu · May 10, 2024 · f19646f · f19646f
1 parent ae590b9
commit f19646f
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 7 deletions.
diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx
@@ -69,6 +69,7 @@ import OverflowListDemoScroll from "./components/overflowList/__test__/OverflowL
 import BadgeDemo from "./components/badge/__test__/BadgeDemo";
 import CardDemo from "./components/card/__test__/CardDemo";
 import TabsDemo from "./components/tabs/__test__/TabsDemo";
+import TabsDemoVueSFC from "./components/tabs/__test__/TabsDemoVueSFC.vue";
 import AnchorDemo from "./components/anchor/__test__/AnchorDemo";
 import BacktopDemo from "./components/backtop/__test__/BacktopDemo";
 import StepsDemo from "./components/steps/__test__/StepsDemo";
@@ -133,7 +134,8 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<StepsDemo />*/}
         {/*<BacktopDemo />*/}
         {/*<AnchorDemo />*/}
-        {/*<TabsDemo />*/}
+        <TabsDemo />
+        <TabsDemoVueSFC/>
         {/*<CardDemo >*/}
         {/*  {a.value}*/}
         {/*</CardDemo>*/}
@@ -200,7 +202,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<AvatarDemo/>*/}
         {/*<RadioDemo />*/}
 
-        <InputDemo />
+        {/*<InputDemo />*/}
         {/*<TypeDemo />*/}
 
         {/*<div style={{color:'#E91E63',width: 100, display:'flex', flexWrap:'wrap'}}>*/}

diff --git a/packages/semi-ui-vue/src/components/tabs/__test__/TabsDemo.tsx b/packages/semi-ui-vue/src/components/tabs/__test__/TabsDemo.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, Fragment, useSlots, reactive } from 'vue';
+import { defineComponent, ref, h, Fragment, useSlots, reactive, onMounted } from 'vue';
 import Tabs, { TabPane } from '../index';
 import { IconFile, IconGlobe, IconHelpCircle } from '@kousum/semi-icons-vue';
 import TabsDemo2 from './TabsDemo2';
@@ -31,16 +31,23 @@ const TabsDemo = defineComponent<TabsDemoProps>((props, {}) => {
     newTabList.splice(closeIndex, 1);
     state.tabList = newTabList;
   }
+  const txt = ref(1)
+  onMounted(()=>{
+    setInterval(()=>{
+      txt.value++
+    }, 1000)
+  })
   return () => {
     return (
       <div>
+        {txt.value}
         <Tabs type="button" keepDOM={false}>
-          <TabPane tab="文档" itemKey="1">
+          <TabPane tab={'文sdfsdsf档' + txt.value} itemKey="1">
             <div>
               <div>文档</div>
             </div>
           </TabPane>
-          <TabPane tab="快速起步" itemKey="2">
+          <TabPane tab="快速dfdffdfx起步" itemKey="2">
             <div>
               <div>快速起步</div>
             </div>

diff --git a/packages/semi-ui-vue/src/components/tabs/__test__/TabsDemoVueSFC.vue b/packages/semi-ui-vue/src/components/tabs/__test__/TabsDemoVueSFC.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Tabs from '../index';
+import TabPane from '../TabPane';
+import Button from '../../button/Button';
+
+defineOptions({});
+
+interface Props {
+  msg?: any,
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: 'row-click', row: any, column: any, event: PointerEvent): void,
+}>();
+
+const count = ref(0);
+
+</script>
+<script lang="ts">
+export default {
+  name: 'TabsDemoVueSFC',
+};
+</script>
+<template>
+  <div>
+    <Tabs>
+      <TabPane tab="1fdsdsdsdsddsdsdsdsd5656f23" itemKey="1">
+        <Button>sdssdfdfsfsfd</Button>
+      </TabPane>
+      <TabPane tab="23dfddsdf44" itemKey="2">
+        2123sdsd
+      </TabPane>
+      <TabPane tab="25344444t" itemKey="3">
+        <Button>sdserd</Button>
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/packages/semi-ui-vue/src/components/tabs/index.tsx b/packages/semi-ui-vue/src/components/tabs/index.tsx
@@ -216,7 +216,9 @@ const Tabs = defineComponent<TabsProps>(
         return tabList;
       }
       return childrenRef.value
-        .filter((child) => typeof child.type !== 'symbol')
+        .filter((child) => {
+          return typeof child.type !== 'symbol' && (child.type as any)?.name === 'TabPane';
+        })
         .map((child) => {
           if (child) {
             const { tab, icon, disabled, itemKey, closable } = child.props;
@@ -266,7 +268,13 @@ const Tabs = defineComponent<TabsProps>(
     return () => {
       const children = slots.default?.();
       const children_ = getFragmentChildren(slots);
-      if (children_.length !== childrenRef.value.length) {
+      if (
+        children_.length !== childrenRef.value.length ||
+        !isEqual(
+          children_.map((item) => item.props),
+          childrenRef.value.map((item) => item.props)
+        )
+      ) {
         childrenRef.value = children_;
       }