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="/">活动管理</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>