feat(breadcrumb): 修复面包屑组件

This commit is contained in:
就眠仪式 2021-10-15 10:46:34 +08:00
parent 40114bee0d
commit cb5c7e0cfc
4 changed files with 34 additions and 12 deletions

View File

@ -49,10 +49,10 @@ export default {
::: demo ::: demo
<template> <template>
<lay-breadcrumb separator="-"> <lay-breadcrumb separator="--">
<lay-breadcrumb-item title="可口可乐"></lay-breadcrumb-item> <lay-breadcrumb-item>今天</lay-breadcrumb-item>
<lay-breadcrumb-item title="美年达"></lay-breadcrumb-item> <lay-breadcrumb-item>有些</lay-breadcrumb-item>
<lay-breadcrumb-item title="芬达"></lay-breadcrumb-item> <lay-breadcrumb-item>不开心</lay-breadcrumb-item>
</lay-breadcrumb> </lay-breadcrumb>
</template> </template>
@ -77,3 +77,11 @@ export default {
| | | | | | | |
| --------- | ------ | --- | | --------- | ------ | --- |
| separator | 分割符 | `/` | | separator | 分割符 | `/` |
::: field breadcrumb slots
:::
| | | |
| --------- | ------ | --- |
| default | 默认插槽 | `--` |

View File

@ -4929,11 +4929,15 @@ body .layui-table-tips .layui-layer-content {
color: #5fb878 !important; color: #5fb878 !important;
} }
.layui-breadcrumb a cite { .layui-breadcrumb a:nth-last-child(2) {
color: #999; color: #666;
font-style: normal; font-style: normal;
} }
.layui-breadcrumb span:last-child {
display: none;
}
.layui-breadcrumb span[lay-separator] { .layui-breadcrumb span[lay-separator] {
margin: 0 10px; margin: 0 10px;
color: #ccc; color: #ccc;

View File

@ -5,7 +5,7 @@
</template> </template>
<script setup name="LayBreadcrumb" lang="ts"> <script setup name="LayBreadcrumb" lang="ts">
import { defineProps, provide, withDefaults, useSlots, ref, Ref } from 'vue' import { defineProps, provide, withDefaults } from 'vue'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

View File

@ -1,14 +1,24 @@
<template> <template>
<a href>{{ title }}</a> <a href="javascript:void(0);">
<template v-if="slot.default">
<slot></slot>
</template>
<template v-else>
{{ title }}
</template>
</a>
<span lay-separator>{{ separator }}</span> <span lay-separator>{{ separator }}</span>
</template> </template>
<script setup name="LayBreadcrumbItem" lang="ts"> <script setup name="LayBreadcrumbItem" lang="ts">
import { defineProps, inject } from 'vue' import { defineProps, inject, useSlots } from 'vue'
const props = defineProps<{ const slot = useSlots()
title: string
}>() const props =
defineProps<{
title: string
}>()
const separator = inject('separator') const separator = inject('separator')
</script> </script>