[新增] breadcrumb 组件 separator 属性, 允许自定义分隔符

docs/docs/zh-CN/components/breadcrumb.md

@@ -20,4 +20,32 @@ export default {
 }
 </script>
 
-:::
+:::
+
+::: 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>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+|  |  |  |
+|--|--|--|
+| separator | 分割符 | `/` |

src/module/breadcrumb/index.vue

@@ -5,5 +5,16 @@
 </template>
 
 <script setup name="LayBreadcrumb" lang="ts">
+import { defineProps, provide, withDefaults } from 'vue'
 
+const props = withDefaults(
+  defineProps<{
+    separator?: string
+  }>(),
+  {
+    separator: "/"
+  }
+)
+
+provide("separator",props.separator);
 </script>

src/module/breadcrumbItem/index.vue

@@ -1,15 +1,17 @@
 <template>
     <a href="">{{title}}</a>
-    <span lay-separator="">/</span>
+    <span lay-separator="">{{separator}}</span>
 </template>
 
 <script setup name="LayBreadcrumbItem" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, inject } from 'vue'
 
 const props =
   defineProps<{
     title: string
   }>()
 
+const separator =  inject("separator");
+
 
 </script>