feat(breadcrumb): 修复面包屑组件
This commit is contained in:
parent
40114bee0d
commit
cb5c7e0cfc
@ -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 | 默认插槽 | `--` |
|
||||
|
@ -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;
|
||||
|
@ -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<{
|
||||
|
@ -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<{
|
||||
title: string
|
||||
}>()
|
||||
const slot = useSlots()
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const separator = inject('separator')
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user