Skip to content

Commit

Permalink
fix(BreadCrumbItem): 支持 v-for 渲染 (#811)
Browse files Browse the repository at this point in the history
  • Loading branch information
ocean-gao committed May 21, 2024
1 parent aed33ee commit d137a0a
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 23 deletions.
6 changes: 5 additions & 1 deletion components/breadcrumb/breadcrumb-item.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -30,6 +30,10 @@ export default defineComponent({
onClick={() => handleClick()}
>
{slots.default?.()}
{/* 渲染分隔符 */}
<div class={`${itemCls}-separator`}>
{ parentProps.separator }
</div>
</div>
);
},
Expand Down
15 changes: 5 additions & 10 deletions components/breadcrumb/breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 }
</>
);
});
};
Expand Down
24 changes: 12 additions & 12 deletions components/breadcrumb/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
13 changes: 13 additions & 0 deletions docs/.vitepress/components/breadcrumb/base.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -23,6 +26,16 @@ import { ref } from 'vue';
const separator = ref('/');
const fontSize = ref(14);
const list = [
{
text: '首页',
}, {
text: '二级页面',
}, {
text: '三级页面',
},
];
</script>

<style>
Expand Down

0 comments on commit d137a0a

Please sign in to comment.