1

src/layouts/components/VabBreadcrumb/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-breadcrumb class="breadcrumb-container hidden-sm-and-down" separator=">">
+    <el-breadcrumb-item v-for="item in list" :key="item.path">
+      {{ item.meta.title }}
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+  export default {
+    name: 'VabBreadcrumb',
+    data() {
+      return {
+        list: this.getBreadcrumb(),
+      }
+    },
+    watch: {
+      $route() {
+        this.list = this.getBreadcrumb()
+      },
+    },
+    methods: {
+      getBreadcrumb() {
+        return this.$route.matched.filter((item) => item.name && item.meta.title)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .breadcrumb-container {
+    height: $base-nav-bar-height;
+    font-size: $base-font-size-default;
+    line-height: $base-nav-bar-height;
+
+    ::v-deep {
+      .el-breadcrumb__item {
+        .el-breadcrumb__inner {
+          a {
+            display: flex;
+            float: left;
+            font-weight: normal;
+            color: #515a6e;
+
+            i {
+              margin-right: 3px;
+            }
+          }
+        }
+
+        &:last-child {
+          .el-breadcrumb__inner {
+            a {
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>