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>