init

src/component/breadcrumb/index.less

@@ -0,0 +1,29 @@
+.layui-breadcrumb {
+  font-size: 0;
+}
+
+.layui-breadcrumb > * {
+  font-size: 14px;
+}
+
+.layui-breadcrumb a {
+  color: #999;
+}
+
+.layui-breadcrumb a:hover {
+  color: var(--global-checked-color) !important;
+}
+
+.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: var(--global-neutral-color-7);
+}

src/component/breadcrumb/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/breadcrumb/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  name: "LayBreadcrumb",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { provide, withDefaults } from "vue";
+
+export interface BreadcrumbProps {
+  separator?: string;
+}
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
+  separator: "/",
+});
+
+provide("separator", props.separator);
+</script>
+
+<template>
+  <span class="layui-breadcrumb">
+    <slot></slot>
+  </span>
+</template>