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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user