PageHeaderWrapper 组件去除面包屑功能

PageHeaderWrapper 组件去除面包屑功能

需求

  • 需求就是去除PageHeaderWrapper 组件去除面包屑功能
  • 虽然感觉拣了芝麻丢了西瓜,毕竟这个组件最大的特色就是面包屑功能了嘞

历程

  • PageHeaderWrapper 组件算是 ProLayout 布局组件的一个子分支
  • ProLayout 组件非常方便,通过简单地配置就可以实现精美的页面布局
  • 官方文档地址点我哦
  • 不幸的是,这里并没有提供展示或隐藏面包屑的 API 呢
    PageHeaderWrapper 组件去除面包屑功能
  • 只有去看看源码
  • 在源码中观察到,该组件的 props 中有一个 breadcrumb 属性。对的哦,这个单词的意思就是面包屑 的意思,再三确认,它是写在 Vue实例的props里面,就说明这个属性是可以从父组件传递过来
    PageHeaderWrapper 组件去除面包屑功能
    PageHeaderWrapper 组件去除面包屑功能

实现

  • 经过以上的探索,实现就非常简单了
  • 对的,只需要设置 PageHeaderWrapperbreadcrumb 属性为 false 就可以啦
  • 如下图:
    PageHeaderWrapper 组件去除面包屑功能