[组件] 初步集成 breadcrumb 面包屑

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

@@ -0,0 +1,23 @@
+::: demo
+
+<template>
+    <lay-breadcrumb>
+        <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>
+
+:::

docs/src/layouts/Layout.vue

@@ -76,8 +76,9 @@ export default {
       { id: 14, title: '区块',subTitle:"block" ,path: '/zh-CN/components/block' },
       { id: 15, title: '分割',subTitle:"line" ,path: '/zh-CN/components/line' },
       { id: 16, title: '菜单',subTitle:"nav" ,path: '/zh-CN/components/menu' },
-      { id: 17, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
-      { id: 18, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
+      { id: 17, title: '面包屑',subTitle:"breadcrumb" ,path: '/zh-CN/components/breadcrumb' },
+      { id: 18, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
+      { id: 19, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -37,6 +37,10 @@ const zhCN = [
         path: '/zh-CN/components/container',
         component: () => import('../../docs/zh-CN/components/container.md'),
         meta: { title: '容器' },
+      }, {
+        path: '/zh-CN/components/breadcrumb',
+        component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
+        meta: { title: '面包屑' },
       },
       {
         path: '/zh-CN/components/button',

docs/src/styles/vars.css

@@ -9,7 +9,6 @@
   --c-text-light-2: #476582;
   --c-text-light-3: #90a4b7;
 
-  --c-brand: #409eff;
   --c-brand-light: #4abf8a;
 
   --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);

src/index.ts

@@ -34,6 +34,8 @@ import LayMenuItem from './module/menuItem/index'
 import LayMenuChildItem from './module/menuChildItem/index'
 import LayCheckbox from './module/checkbox/index'
 import LayForm from './module/form/index'
+import LayBreadcrumb from './module/breadcrumb/index'
+import LayBreadcrumbItem from './module/breadcrumbItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -66,7 +68,9 @@ const components: Record<string, IDefineComponent> = {
   LayMenuItem,
   LayMenuChildItem,
   LayCheckbox,
-  LayForm
+  LayForm,
+  LayBreadcrumb,
+  LayBreadcrumbItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -111,6 +115,8 @@ export {
   LayMenuChildItem,
   LayCheckbox,
   LayForm,
+  LayBreadcrumb,
+  LayBreadcrumbItem,
   install,
 }
 

src/module/body/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
     app.component(Component.name || 'LayBody', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/breadcrumb/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayBreadcrumb', Component)
+}
+
+export default Component as IDefineComponent

src/module/breadcrumb/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <span class="layui-breadcrumb" style="visibility: visible;">
+      <slot></slot>
+  </span>
+</template>
+
+<script setup name="LayBreadcrumb" lang="ts">
+import { useSlots } from "vue";
+
+</script>

src/module/breadcrumbItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayBreadcrumbItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/breadcrumbItem/index.vue

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