锐客网

  1. 首页 > it技术 > >

vue3|vue中自己封装面包屑组件

vue中自己封装面包屑组件 【vue3|vue中自己封装面包屑组件】要实现效果
vue3|vue中自己封装面包屑组件
文章图片


前言 很多电商类产品都需要实现面包屑导航，用来优化用户体验
一.初级面包屑封装组件 1.封装基础结构组件 Bread.vue

='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; } }

2.定义 props 暴露 parentPath parentName 属性，默认插槽，动态渲染组件
  • 首页
    > />
    //用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.使用组件
飞织系列 飞织系列//parentPath去掉后不能实现跳转

二。高级封装 无限极导航 参考element-ui的面包屑组件：
首页 活动管理 活动列表 活动详情

1.封装基础结构组件 BrendItem.vue
> export default {name: 'XtxBreadItem', props: {to: {type: [String, Object] //to的值即可以是字符串，也可以是对象 } } } //使用时

2.封装 Brend.vue
> export default {name: 'XtxBread' } ='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; } }

3.注册
import BreadItemfrom './BreadItem' import Breadfrom './Bread' export default {install (app) {// Vue2中，参数是Vue构造函数 // Vue3中，参数是根组件的实例对象// 配置一个全局组件 app.component(Bread.name,Bread) app.component(BreadItem.name, BreadItem) } }

4.使用
// 面包屑 首页 服饰 飞织系列

    推荐阅读


    上一篇：算法与数据结构体系课【已完结】网盘分享

    下一篇：cplex|cplex的下载、安装、IDE编程及相关问题解决