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