enn-breadcrumb

公共基础组件 面包屑组件

Usage no npm install needed!

<script type="module">
  import ennBreadcrumb from 'https://cdn.skypack.dev/enn-breadcrumb';
</script>

README

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>

PageHeader Attributes

参数 类型 必填 默认值 说明
back [Object, Function, String] - 点击回调
title String 返回 显示文字
  • 接受一个back回调,如果back是函数,直接调用
  • 如果是字符串,且this上挂载了$router,将会把字符串作为router的name进行跳转
  • 以上两条都不符合,则进行window的路由跳转,接受一个对象(包含name、herf、query参数)