基于element-ui的页面内面包屑组件

lzlz000的个人主页

elment-ui提供了面包屑组件 el-breadcrumb 然而他要配合url跳转路由使用，在项目中需要用到页面内的面包屑，因此我写了一个组件 inner-breadcrumb

inner-breadcrumb 包装了 el-breadcrumb 显示效果基本相同，不同的是，不再跳转页面，而是提供一个v-model控制当前的path值，并且提供了动态参数显示的功能（样式只是因为我们的需求如此，这个可以很容易更改）
原版样式

本组件样式

属性

名称	说明	类型	默认值
v-model	绑定路径值	string/number	必填
path	面包屑全路径参数，详见下文	object	必填
showInRoot	是否在根页面显示该组件	boolean	false
showBack	是否在右侧显示“返回上一级”	boolean	false
labelArgs	面包屑标签动态参数,详见下文	object	-

例

当 v-model绑定值为"3"时，页面为：

• 控制页面的方式

...
...
...
...

以此类推，页面会按照树形结构自动生成当前位置的面包屑，你可以无限添加。

值得注意的是，当回到主页面时候，面包屑默认隐藏，因为绝大多数需求和常理都不需要在主页面显示孤零零的面包屑。当然可以通过添加参数 showInRoot 来显示它

属性path的设置

名称	说明	类型	默认值
label	页面标签显示的值	string/number	必填
key	标签的key	string/number	必填
children	下一级路径的集合	array,其中每个元素都是一个节点，多叉树结构	-
disable	如果当前路径不允许被点击则加上	boolean	false

• 注意，开启“返回上一级”按钮，若上一级目录是disable，则会跳过，若所有上级目录均为disable，则无效，控制台会打印警告信息

{
    label: "一级页面", 
    key: "1",
    children: [
      {
        key: "2A",
        label: "二级页面A",
        disable: true
      },
      {
        key: "2B",
        label: "二级页面B",
        children: [
          {
            key: "3",
            label: "三级页面"
          }
        ]
      }
    ]
}

动态参数

动态参数通过属性 labelArgs 设置，适用于需要路径动态标签的情况

例

当切换到对应路径arrange时候，会显示：
[图片上传失败...(image-5f5ef0-1562071791110)]

源码如下: