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/" 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/">服饰</XtxBreadItem> <BreadItem >飞织系列</XtxBreadItem> </XtxBread>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。
您可能感兴趣的文章:
- vue3自己封装面包屑功能组件的几种方式
- vue 封装面包屑组件教程
- vue+element-ui表格封装tag标签使用插槽
- Vue顶部tags浏览历史的实现
- 实用的 vue tags 创建缓存导航的过程实现
- vue基础之面包屑和标签tag详解
