Enn-breadcrumb NPM

Breadcrumb

公共基础组件面包屑组件

示例

<template>
  <div>
    <Breadcrumb :breadcrumbs="breadcrumbs" />
  </div>
</template>

<script>
import Breadcrumb from 'enn-breadcrumb';

export default {
  components: {
    Breadcrumb,
  },
  data() {
    return {
      breadcrumbs: [
        {
          name: 'test',
          label: 'test',
        },
      ],
    };
  },
}
</script>

API

Breadcrumb Attributes

参数	类型	默认值	说明
breadcrumbs	Array	{ label: '首页' }	面包屑的数据
home	string\Boolean\Object\Array	'/'	首页跳转的 name，传 false 表示不需要首页
useHistory	boolean	false	使用 history API 跳转首页的链接

Tips

useHistory 主要用于微应用跳转至对应的首页
home Object 和 Array 参数和 breadcrumbs 一样

breadcrumbs Attributes

参数	类型	必填	默认值	说明
label	string	是	-	面包屑项显示的文案
to	string		-	路由跳转对象，同 vue-router 的 to
name	string		-	路由跳转 name
href	string		-	使用 history 进行路由跳转
handler	Function		-	自定义点击事件的处理函数
query	Object		-	路由跳转的参数

Tips

其中 to 的优先级更高，设置了 to 之后将不读取 name 和 query。
query 使用 this.$route.query 获取，或直接从 url 中的 search 获取。

配置函数

用于统一修改默认值，避免重复配置

事件名称	参数	说明
setDefaultHome	home 参数的默认值	统一配置默认的 home
setDefaultUseHistory	useHistory 参数的默认值	统一配置默认的 useHistory

示例

query

<Breadcrumb
  :breadcrumbs="[
    {
      label: '列表',
      name: 'list'
    },
    {
      label: '详情',
      name: 'detail',
      query: { id: 10 }, // query 使用 this.$route.query 获取，或直接从 url 中的 search 获取。
    },
    {
      label: '编辑',
    }
  ]"
/>

不显示首页

<Breadcrumb :home="false" />

统一设置首页配置

一般放置于 main.js

import { setDefaultHome } from 'enn-breadcrumb';
setDefaultHome(false);

返回 PageHeader

<template>
  <div>
    <PageHeader :back="goBack" />
  </div>
</template>

<script>
import { PageHeader } from 'enn-breadcrumb';

export default {
  components: {
    PageHeader,
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>