vue面包屑组件的封装方法
作者：爱美食的程序员
这篇文章主要为大家详细介绍了vue面包屑组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中自己封装面包屑组件，供大家参考，具体内容如下
要实现效果
前言
很多电商类产品都需要实现面包屑导航，用来优化用户体验
一、初级面包屑封装组件
1.封装基础结构组件 Bread.vue
<template>
<div class='xtx-bread'>
<div class="xtx-bread-item">
<RouterLink to="/">首页</RouterLink>
</div>
<i class="iconfont icon-angle-right"></i>
<div class="xtx-bread-item">
<RouterLink to="/category/10000">二级级导航</RouterLink>
</div>
<i class="iconfont icon-angle-right"></i>
<div class="xtx-bread-item">
<span>三级导航</span>
</div>
</div>
</template>
<style scoped lang='less'>
.xtx-bread{
display: flex;
padding: 25px 10px;
&-item {
a {
color: #666;
transition: all .4s;
&:hover {
color: @xtxColor;
}
}
}
i {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
2.定义 props 暴露 parentPath parentName 属性，默认插槽，动态渲染组件
<div class='xtx-bread'>
<div class="xtx-bread-item">
<RouterLink to="/">首页</RouterLink>
</div>
<i class="iconfont icon-angle-right"></i>
<template v-if="parentName">
<div class="xtx-bread-item" v-if="parentName">
<RouterLink v-if="parentPath" to="/category/10000">{{parentName}}</RouterLink>
<span v-else>{{parentName}}</span>
</div>
</template>
<i v-if="parentName" class="iconfont icon-angle-right"></i>
<div class="xtx-bread-item">
<span> <slot/> </span>
</div>
</div>
//用props接收数据
props: {
parentName: {
type: String,
default: ''
},
parentPath: {
type: String,
default: ''
}
}
3.注册组件，使用验证效果
import Bread from './Bread'
export default {
install (app) {
// Vue2中，参数是Vue构造函数
// Vue3中，参数是根组件的实例对象
// 配置一个全局组件
app.component(Bread.name, Bread)
}
}
4.使用组件
<Bread parentPath="/category/1005000" parentName="服饰">飞织系列</Bread> <Bread parentName="服饰">飞织系列</Bread> //parentPath去掉后不能实现跳转
二、高级封装 无限极导航
参考element-ui的面包屑组件：
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/" rel="external nofollow" >活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
1.封装基础结构组件 BrendItem.vue
<template>
<div class="xtx-bread-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
<i class="iconfont icon-angle-right"></i>
</div>
</template>
<script>
export default {
name: 'XtxBreadItem',
props: {
to: {
type: [String, Object] //to的值即可以是字符串，也可以是对象
}
}
}
</script>
//使用时
<bread-item to="/xxx/id"></bread-item>
<bread-item :to='{path:"/xxx/id"}'></bread-item>
2.封装 Brend.vue
<template>
<div class='xtx-bread'>
<slot />
</div>
</template>
<script>
export default {
name: 'XtxBread'
}
</script>
<style scoped lang='less'>
.xtx-bread {
display: flex;
padding: 25px 10px;
:deep(&-item) {
a {
color: #666;
transition: all 0.4s;
&:hover {
color: @xtxColor;
}
}
}
:deep(i) {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
3.注册
import BreadItem from './BreadItem'
import Bread from './Bread'
export default {
install (app) {
// Vue2中，参数是Vue构造函数
// Vue3中，参数是根组件的实例对象
// 配置一个全局组件
app.component(Bread.name,Bread)
app.component(BreadItem.name, BreadItem)
}
}
4.使用
// 面包屑
<Bread>
<BreadItem to="/">首页</XtxBreadItem>
<BreadItem to="/category/1005000">服饰</XtxBreadItem>
<BreadItem >飞织系列</XtxBreadItem>
</XtxBread>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。