Breadcrumb 面包屑

components/common/breadcrumb/src/breadcrumb.vue

<template>
  <div class="v-breadcrumb" aria-label="breadcrumb">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'vBreadcrumb',
  props: {
    separator: {
      type: String,
      default: '/',
    },
    separatorClass: {
      type: String,
      default: '',
    }
  },
  provide() { // https://cn.vuejs.org/v2/api/#provide-inject
    return {
      vBreadcrumb: this,
    };
  },
  mounted() {
    const items = this.$el.querySelectorAll('.v-breadcrumb_item');
    if (items.length) {
      items[items.length - 1].setAttribute('aria-current', 'page');
    }
  },
};
</script>

components/common/breadcrumb/src/breadcrumb-item.vue

<template>
  <span class="v-breadcrumb_item">
    <slot></slot>
    <i v-if="separatorClass" class="v-breadcrumb_separator" v-bind:class="separatorClass"></i>
    <span v-else class="v-breadcrumb_separator">{{ separator }}</span>
  </span>
</template>

<script>
export default {
  name: 'vBreadcrumbItem',
  data() {
    return {
      separator: '',
      separatorClass: '',
    };
  },
  inject: ['vBreadcrumb'], // https://cn.vuejs.org/v2/api/#provide-inject
  mounted() {
    this.separator = this.vBreadcrumb.separator;
    this.separatorClass = this.vBreadcrumb.separatorClass;
  },
};
</script>

components/common/breadcrumb/index.js

import VBreadcrumb from './src/breadcrumb';

VBreadcrumb.install = (Vue) => {
  Vue.component(VBreadcrumb.name, VBreadcrumb);
};

export default VBreadcrumb;

components/common/breadcrumb-item/index.js

import VBreadcrumbItem from '../breadcrumb/src/breadcrumb-item';

VBreadcrumbItem.install = (Vue) => {
  Vue.component(VBreadcrumbItem.name, VBreadcrumbItem); // https://cn.vuejs.org/v2/api/#Vue-component
};

export default VBreadcrumbItem;

全局注册组件

main.js

import Breadcrumb from '@/components/common/breadcrumb/index';
import BreadcrumbItem from '@/components/common/breadcrumb-item/index';

Vue.config.productionTip = false;

Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

使用

<v-breadcrumb separator="/">
  <v-breadcrumb-item>首页</v-breadcrumb-item>
  <v-breadcrumb-item>正文</v-breadcrumb-item>
</v-breadcrumb>