fix(BreadCrumbItem): 支持 v-for 渲染 (#811)

WeBankFinTech · May 21, 2024 · d137a0a · d137a0a
1 parent aed33ee
commit d137a0a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/components/breadcrumb/breadcrumb-item.tsx b/components/breadcrumb/breadcrumb-item.tsx
@@ -1,6 +1,6 @@
 import { computed, defineComponent, inject } from 'vue';
 import { useTheme } from '../_theme/useTheme';
-import { BREADCRUMB_KEY, itemCls } from './const';
+import { BREADCRUMB_KEY, itemCls, prefixCls } from './const';
 
 export default defineComponent({
     name: 'FBreadcrumbItem',
@@ -30,6 +30,10 @@ export default defineComponent({
                 onClick={() => handleClick()}
             >
                 {slots.default?.()}
+                {/* 渲染分隔符 */}
+                <div class={`${itemCls}-separator`}>
+                    { parentProps.separator }
+                </div>
             </div>
         );
     },

diff --git a/components/breadcrumb/breadcrumb.tsx b/components/breadcrumb/breadcrumb.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, provide } from 'vue';
+import { computed, defineComponent, onMounted, provide } from 'vue';
 import { useTheme } from '../_theme/useTheme';
 import { breadcrumbProps } from './props';
 import { BREADCRUMB_KEY, prefixCls } from './const';
@@ -24,16 +24,11 @@ export default defineComponent({
 
         // 渲染所有的层级
         const renderAllItem = () => {
-            return breadItemArr.value.map((item, index) => {
+            return breadItemArr.value.map((item) => {
                 return (
-                    <div class={`${prefixCls}-child`}>
-                        {item}
-                        {/* 渲染分隔符 */}
-                        <div class={`${prefixCls}-separator`}>
-                            {index !== breadItemArr.value.length - 1
-                            && props.separator}
-                        </div>
-                    </div>
+                    <>
+                        { item }
+                    </>
                 );
             });
         };

diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
@@ -12,15 +12,13 @@
     flex-wrap: wrap;
     align-items: center;
     color: @text-color;
+}
 
-    &-child {
-        display: flex;
-        align-items: center;
-
-        .icon {
-            margin-right: 4px;
-        }
-    }
+.@{breadcrumb-item} {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 4px 0;
 
     &-separator {
         display: flex;
@@ -30,13 +28,15 @@
         margin: 0 4px;
         line-height: 1;
     }
-}
-
-.@{breadcrumb-item} {
-    margin: 4px 0;
 
     &:hover {
         color: @hover-text-color;
         cursor: pointer;
     }
+    &:last-child &-separator{
+        display: none;
+    }
+    &:last-child {
+        color: @hover-text-color;
+    }
 }
diff --git a/docs/.vitepress/components/breadcrumb/base.vue b/docs/.vitepress/components/breadcrumb/base.vue
@@ -15,6 +15,9 @@
         <FBreadcrumbItem>四级页面</FBreadcrumbItem>
         <FBreadcrumbItem>五级页面</FBreadcrumbItem>
     </FBreadcrumb>
+    <FBreadcrumb :separator="separator" :fontSize="fontSize">
+        <FBreadcrumbItem v-for="(item, index) in list" :key="index">{{ item.text }}</FBreadcrumbItem>
+    </FBreadcrumb>
 </template>
 
 <script setup>
@@ -23,6 +26,16 @@ import { ref } from 'vue';
 const separator = ref('/');
 
 const fontSize = ref(14);
+
+const list = [
+    {
+        text: '首页',
+    }, {
+        text: '二级页面',
+    }, {
+        text: '三级页面',
+    },
+];
 </script>
 
 <style>