脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue面包屑组件

vue面包屑组件的封装方法

 更新时间：2021年09月18日 11:59:13   作者：爱美食的程序员  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解Vue适时清理keepalive缓存方案

    详解Vue适时清理keepalive缓存方案

    说到Vue缓存，我们肯定首先选择官方提供的缓存方案keep-alive，本文主要介绍了详解Vue适时清理keepalive缓存方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue使用cesium创建数据白模方式

    vue使用cesium创建数据白模方式

    这篇文章主要介绍了vue使用cesium创建数据白模方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目打包部署总结篇

    Vue项目打包部署总结篇

    这篇文章主要介绍了Vue项目打包部署总结篇,关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨,需要的朋友可以参考下
    2024-08-08
  • Vue中的计算属性computed传参方式

    Vue中的计算属性computed传参方式

    这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 基于vue 动态菜单 刷新空白问题的解决

    基于vue 动态菜单 刷新空白问题的解决

    这篇文章主要介绍了基于vue 动态菜单 刷新空白问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 组件基础知识总结

    vue 组件基础知识总结

    这篇文章主要介绍了vue 组件基础知识的相关资料，帮助大家更好的理解和使用vue的组件，感兴趣的朋友可以了解下
    2021-01-01
  • vue3的setup语法糖简单封装ckediter的过程

    vue3的setup语法糖简单封装ckediter的过程

    Vue3官方提供了 script setup 语法糖,只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,今天通过本文给大家分享vue3的setup语法糖简单封装ckediter的过程,感兴趣的朋友一起看看吧
    2023-10-10
  • 关于Vue "__ob__:Observer"属性的解决方案详析

    关于Vue "__ob__:Observer"属性的解决方案详析

    在操作数据的时候发现,__ob__: Observer这个属性出现之后,如果单独拿数据的值,就会返回undefined,下面这篇文章主要给大家介绍了关于Vue "__ob__:Observer"属性的解决方案,需要的朋友可以参考下
    2022-11-11
  • vue.js动态修改background-image问题

    vue.js动态修改background-image问题

    这篇文章主要介绍了vue.js动态修改background-image问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 深入解析el-col-group强大且灵活的Element表格列组件

    深入解析el-col-group强大且灵活的Element表格列组件

    这篇文章主要为大家介绍了el-col-group强大且灵活的Element表格列组件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04

最新评论