仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
element-ui 面包屑结构
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
#自封装面包屑组件
先封装基础组件 my-bread-item.vue
<template>
<div class="my-bread-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
</div>
</template>
<script>
export default {
name: 'MyBreadItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>
封装父容器组件 my-bread.vue
<script>
import { h } from 'vue'
export default {
name: 'MyBread',
render() {
const items = this.$slots.default().filter(item => item.type.name === 'MyBrandItem')
const context = []
items.forEach((item, i) => {
context.push(item)
if (i < items.length - 1) {
context.push(h('i', { class: 'iconfont icon-angle-right' }, null))
}
})
return h('div', { class: 'My-bread' }, context)
}
}
</script>
<style scoped lang="less">
.My-bread {
display: flex;
padding: 25px 10px;
:deep(&-item) {
a {
color: #666;
transition: all 0.4s;
&:hover {
color: @MyColor;
}
}
}
:deep(i) {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
封装父容器组件 my-bread.vue
JSX 优化
<script>
export default {
name: 'MyBread',
render() {
const items = this.$slots.default().filter(item => item.type.name === 'MyBrandItem')
const context = []
items.forEach((item, i) => {
context.push(item)
if (i < items.length - 1) {
context.push(<i className='iconfont icon-angle-right'></i>)
}
})
return <div className='my-bread'>{context}</div>
}
}
</script>
<style scoped lang="less">
.My-bread {
display: flex;
padding: 25px 10px;
:deep(&-item) {
a {
color: #666;
transition: all 0.4s;
&:hover {
color: @MyColor;
}
}
}
:deep(i) {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
使用组件
<MyBread>
<MyBreadItem to="/">主页</MyBreadItem>
<MyBreadItem>二级</MyBreadItem>
<MyBreadItem>三级</MyBreadItem>
</MyBread>