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

View File

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

View File

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

View File

@ -1,14 +1,24 @@
<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>
</template>
<script setup name="LayBreadcrumbItem" lang="ts">
import { defineProps, inject } from 'vue'
import { defineProps, inject, useSlots } from 'vue'
const props = defineProps<{
const slot = useSlots()
const props =
defineProps<{
title: string
}>()
}>()
const separator = inject('separator')
</script>