first

packages/breadcrumb/index.js

@@ -0,0 +1,8 @@
+import ElBreadcrumb from './src/breadcrumb';
+
+/* istanbul ignore next */
+ElBreadcrumb.install = function(Vue) {
+  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
+};
+
+export default ElBreadcrumb;

packages/breadcrumb/src/breadcrumb-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="el-breadcrumb__item">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumbItem',
+    props: {
+      to: {},
+      replace: Boolean
+    },
+    data() {
+      return {
+        separator: '',
+        separatorClass: ''
+      };
+    },
+
+    inject: ['elBreadcrumb'],
+
+    mounted() {
+      this.separator = this.elBreadcrumb.separator;
+      this.separatorClass = this.elBreadcrumb.separatorClass;
+      const link = this.$refs.link;
+      link.setAttribute('role', 'link');
+      link.addEventListener('click', _ => {
+        const { to, $router } = this;
+        if (!to || !$router) return;
+        this.replace ? $router.replace(to) : $router.push(to);
+      });
+    }
+  };
+</script>

packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumb',
+
+    props: {
+      separator: {
+        type: String,
+        default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        elBreadcrumb: this
+      };
+    },
+
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
+      }
+    }
+  };
+</script>